Question

我在WordPress环境中工作而无法访问CSS：（。

我有4个div框，目前使用以下方式并排显示：

＆＃13;

<style> .cells {
  display: block;
  float: left;
  width: 33%;
}
.clearfix {
  overflow: auto;
}
</style>

＆＃13;

<section>
  <div class="cells" style="width: 20.5%; height: 175px; margin: 0 20px 0 0; border: 1px solid grey; padding: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;">
    <h3>this is box one</h3>
  </div>
  <div class="cells" style="width: 20.5%; height: 175px; margin: 0 20px 0 0; border: 1px solid grey; padding: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;">
    <h3>this is box two</h3>
  </div>
  <div class="cells" style="width: 20.5%; height: 175px; margin: 0 20px 0 0; border: 1px solid grey; padding: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;">
    <h3>this is box three</h3>
  </div>
  <div class="cells" style="width: 20.5%; height: 175px; margin: 0 20px 0 0; border: 1px solid grey; padding: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;">
    <h3>this is box four</h3>
  </div>
  <div class="clearfix"></div>
</section>

＆＃13;

这些框在页面上并排显示，但我需要让它们在各种移动设备上向下流动。

我不知道该怎么做，有人可以提供一些建议吗？

由于

Answer 1

正如另一位在对你的问题的评论中所说，这个问题有点模糊，很难确切地确定你在寻找什么。我认为你的意思是你希望他们在移动设备上都有100％的宽度，而在另一个下面堆叠一个而不是从左到右。但是，同样，只能在移动设备上使用。

好吧，您需要使用媒体查询为移动设备设备上的div 设置新的行为，低于特定的屏幕宽度（比如480像Galaxy s4或其他什么东西，请留出像素比率）

@media screen and (max-width:480px){
    .cells {
        clear:both; 
        width:100%;
    }
}

^这应该确保每个人占据整个宽度并且不会挂在彼此的边缘上，而是清理到下一行。

我希望能让你开始做你想做的事。

DIV盒子响应

1 个答案: