当窗口较窄时，每行一个div，当它更宽时，每行更多div

Question

我的页面上有多个独立的框，全部使用{float：left}。他们没有其他任何东西可以干涉。

当窗口很窄时，我希望这些方框是{width：100％}。当窗户宽度足以让两个盒子并排放置时，我希望这些盒子是{宽度：50％}。

我该怎么做？

Answer 1

媒体查询：

@media screen and (min-width:600px){
     div{width:50%; float:left;}
}

Demo

Answer 2

我认为实现这一目标的正确方法是使用媒体查询。

为了获得灵感（或只是使用），您可以查看http://cssgrid.net

网格系统会根据浏览器窗口的当前大小进行调整，在我看来效果非常好。如果你想要定制的东西，他们的CSS就是一个很好的例子。

Answer 3

你的问题很模糊，但听起来你问的是Responsive Design

Answer 4

到目前为止，唯一的实质性答案是使用媒体查询，我无法弄清楚如何开始工作。这是我找到的解决方案：

<div class="columns">
   <div class="box">
      <p>A bunch of stuff in the box.</p>
   </div>
</div>

然后附上一些CSS：

div.columns {
   column-width: 300px;
}
div.box {
   display: inline-block;
   width: 100%;
}

这并不完美，但无论在任何给定的屏幕尺寸下并排放置多少个盒子，它都能保持100％宽度的内容，并且它可以让我控制允许盒子缩小的范围（使用div .columns'column-width）。