代码之家 › 专栏 › 技术社区 › Mholmes85

@媒体无法获取要堆叠的节

media css html

-1

Mholmes85 · 技术社区 · 7 年前

当窗口变小或移动时,我试图让我的分区垂直堆叠。我正在使用@media only屏幕和(最大宽度:1024px)命令。这很可能很简单,但我看不出我的错误在哪里。欢迎任何帮助。非常感谢。HTML和CSS如下:

@media only screen and (max-width: 1024px) 

{
	#main
	{
		width: auto;
	}
    
    #brass img
    {
        display: none; 
    }

    #Experience, #Education
	{
        width: 100%; 
		text-align: left;
        float: none;
        height: auto; 
    }
    
    #About
    {
        width: 100%;
 
    }
    
}

#main
{
	width: 900px;
	margin: auto;
}

#logo, header h1
{
	display: inline-block;
	margin-bottom: 0px;
}

#Experience
{
	position: fixed;
	right: 45%;
	top: 20%;
	word-wrap: break-word;
	width: 25%;
	text-align: justify; 
}

#Education
{
	word-wrap: break-word;
	width: 25%;
	position: fixed;
	right: 15%; 
	top: 20%;

<div id="brass">
  <section id="left side"> <img src="pic/brass.png" alt="brass" id="brass" /> </section>
</div>
<div id="Experience">
  <section>
    <h2>Experience</h2>
    <ul>
      <li></li>
    </ul>
  </section>
</div>
<div id="Education">
  <section>
    <h2>Education</h2>
    <ul>
      <li></li>
    </ul>
  </section>
</div>
<div id="About">
  <section>
    <h2>About Me</h2>
    <ul>
      <li></li>
    </ul>
  </section>
</div>
<footer></footer>

1 回复 | 直到 7 年前

Josh Lin 7 年前

你想要这个吗?点击 Run code snippet 然后单击 full page 然后调整浏览器窗口的大小

section {
  float: left;
  width: 25%;
}

@media only screen and (max-width: 1024px) {
  section {
    float: none;
    width: 100%;
  }
}

<div>
  <section id="leftside">
    <div id="brass">
      <img src="pic/brass.png" alt="brass" id="brass" />
    </div>
  </section>
  <section>
    <div id="Experience">
      <h2>Experience</h2>
      <ul>
        <li></li>
      </ul>
    </div>
  </section>
  <section>
    <div id="Education">
      <h2>Education</h2>
      <ul>
        <li></li>
      </ul>
    </div>
  </section>
  <section>
    <div id="About">
      <h2>About Me</h2>
      <ul>
        <li></li>
      </ul>
    </div>
  </section>
  <div>
    <footer></footer>