html - 调整窗口大小时 div 定位错误

Question

我正在创建一个响应式网站，我面临的问题是调整大小时 div 的位置。

看到我有 4 个平行的 div 但是当我调整大小时，第四个 div 低于第三个 div 但它应该低于第一个 div。

代码如下:

@media(max-width: 400px){
  .one-fourth{  
    width:90%;
    padding:5px 5px 5px 5px;    /*no error here coz width is 90%*/
    float:left;
  }
}

@media (min-width:401px) and (max-width: 600px){
  .one-fourth{
    width:46%;
    padding:5px 10px 5px 10px;
    float:left;
  }

}

@media (min-width:601px) and (max-width: 800px){
  .one-fourth{
    width:46%;
    padding:5px 10px 5px 10x;
    float:left;
  }
}

@media (min-width:801px)  and (max-width: 1100px){
  .one-fourth{ 
    width:29%;
    padding:5px 10px 5px 10px;
    float:left;
  }
}

@media (min-width: 1101px){
  .one-fourth{
    width:22%;
    padding:5px 10px 5px 10px;
    float:left;
  }
}

html>

<div id="bottom">
<div class="one-fourth">
<h3>Facebook</h3>lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum 
lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum 
lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum
</div>
<div class="one-fourth">
<h3>Twitter</h3>lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum 
lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum 
lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum
</div>
<div class="one-fourth">
<h3>Instagram</h3>lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum 
lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum 
lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum
</div><div class="one-fourth">
<h3>Linkedin</h3>lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum 
lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum 
lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum
</div>
</div>

Answer 1

设置你的高度。就像在例子中:

@media(max-width: 400px){
  .one-fourth{
    height:250px;
    width:90%;
    padding:5px 5px 5px 5px;
    float:left;
  }
}

我在您提供的 Codepen 示例中对其进行了测试。它应该有效。