Question

内容div在其中包含X个div，但是我想要的是内容div中的div从上到下而不是左边的 float（打开sugestions）对。当内容div中的div达到max-height时，内容div内的div溢出到右边并从上到下重新开始（如下例所示），因此，拉伸内容div宽度以适应a新行。
我也想在移动浏览器中使用它。

css---------------------------------------:
.content {
float: left;
min-width: 100px;
height: 95%;
}
.block {
float: left;
width: 100px; 
height: 100px;
}

html---------------------------------------:
<div class="content">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div><!-- end content -->

我的问题是：
1：我怎样才能让div（在内容div中）从上到下浮动 2：当内容div达到

+ ==== content ==== + | +---------------+ | | |               | | | |     div 1     | | | |               | | | |               | | | |               | | | +---------------+ | | +---------------+ | | |               | | | |               | | | |     div 2 | | | |               | | | |               | | | +---------------+ | | +---------------+ | | |               | | | |               | | | |     div 3     | | | |               | | | |               | | | |               | | | +---------------+ | + ================= +

提前谢谢！最大高度时，我怎么能让div在彼此旁边浮动并开始一个新的垂直行。
+ ==== content ====================== + | +---------------+ +---------------+ | | | | | | | | | div 1 | | div 4 | | | | | | | | | | | | | | | | | | | | | +---------------+ +---------------+ | | +---------------+ +---------------+ | | | | | | | | | | | | | | | when more then 3 divs vertacly | | div 2 | | div 5 | | | | i wand it to expand horizontaly | | | | | | | | | | | | | | | | | | | +---------------+ +---------------+ | | +---------------+ | | | | | | | | | | | div 3 | | | | | | | | | | | | | | | +---------------+ | + =================================== +

Answer 1

您可以使用display: flex;和flex-direction: column

执行此操作

以下是演示：http://jsfiddle.net/hpy3vt1s/

此演示使用<div id="container">作为可用空间的指示符，它是视口高度的100％。您必须设置height或max-height来控制每行的最大项数。当您设置max-height: 330;时，一行/列中只有3个项目：Here is a demo showing this

body
{
    margin:0;
}

#container
{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100vh;
}

#container .box
{
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: silver;
    flex: 0 0 auto;
}

HTML：

<div id="container">
    <div class="box">1</div>
    <div class="box">2</div>
   ....
</div>

有关浏览器支持的信息：http://caniuse.com/#feat=flexbox（IE10 +）

关于flexbox的好文章：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

垂直浮动div - 向右溢出

1 个答案: