Question

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

请参阅我的4并行divs但是当我重新调整大小时，第四个div会低于第3个div，但它应低于第1个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＆gt;

<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

我在这里看不到任何HTML，但填充可能是这里的问题。

尝试将您的填充设置为5px，并检查这是否解决了您的问题：

padding:5px 5px 5px 5px;

Answer 2

设定你的身高。像例子中一样：

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

我在您给我们的Codepen示例中对其进行了测试。它应该工作。

窗口调整大小时divs定位错误

2 个答案: