将内联div删除到新行

Question

抱歉，我确定之前已经提出过这个问题，但是如果有的话，请执行以下操作：

我有三个div在线，如下图所示，当浏览器窗口缩小时，它会自动将每个div删除到下一行。我知道我可以使用@media命令并指定一个不同的css样式表，如果浏览器是一定的大小，但如果我能让它变得流畅，它会很棒。

在：

后：

谢谢！

Answer 1

将div包装在容器元素中，例如......

<div class="wrapper">
     <div id="elem1"></div>
     <div id="elem2"></div>
     <div id="elem3"></div>
</div>

然后确保.wrapper有一个设定的宽度，很可能是一个百分比。如果它有一个设置的宽度并且内联元素都是向左浮动的，一旦.wrapper div中没有​​空间，它们就会转移到下一行。

Answer 2

尝试：

<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

和

.box { 
   background: #000;
   width: 300px;
   height: 300px;
   float: left;
}

当它们低于900px时，它们应自动掉落，请参阅：http://jsfiddle.net/JQFH7/

Answer 3

元素

<div id="wrapper">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
<div>

CSS

.inner
{
    width: 100px;
    height: 100px;
    display: inline-block;
    background: black;
}

div#wrapper
{
    width: 100%;
    text-align: center;
}

JSFiddle