垂直浮动div - 向右溢出

内容div在其中包含X数量的div，但是我想要的是，内容div中的div将从上到下浮动到浮动（对于sugestions打开）而不是从左到右。当内容div中的div达到最大高度时，内容div内的div溢出到右侧并从上到下重新开始（如下面的示例所示），因此，将内容div宽度拉伸以适合一个新的行。
我也想使它在移动浏览器中工作。
垂直浮动div - 向右溢出

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：当content div达到最大高度时，我该如何让div浮动在eachother旁边并开始一个新的垂直行。

+ ==== content ==== +         + ==== content ====================== + 
| +---------------+ |         | +---------------+ +---------------+ | 
| |    | |         | |    | |    | | 
| |  div 1  | |         | |  div 1  | |  div 4  | | 
| |    | |         | |    | |    | | 
| |    | |         | |    | |    | |     
| |    | |         | |    | |    | |     
| +---------------+ |         | +---------------+ +---------------+ | 
| +---------------+ |         | +---------------+ +---------------+ | 
| |    | |         | |    | |    | |     
| |    | |         | |    | |    | | 
| |  div 2  | | when more then 3 divs vertacly | |  div 2  | |  div 5  | | 
| |    | | i wand it to expand horizontaly | |    | |    | | 
| |    | |         | |    | |    | | 
| |    | |         | |    | |    | | 
| +---------------+ |         | +---------------+ +---------------+ | 
| +---------------+ |         | +---------------+     | 
| |    | |         | |    |     | 
| |    | |         | |    |     | 
| |  div 3  | |         | |  div 3  |     | 
| |    | |         | |    |     | 
| |    | |         | |    |     |     
| |    | |         | |    |     | 
| +---------------+ |         | +---------------+     | 
+ ================= +         + =================================== +

预先感谢您！

来源

2014-10-30 807

你可以这样做，用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：http://caniuse.com/#feat=flexbox（IE10 +）

好文章：

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

对浏览器的支持信息在flexbox上：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

来源

2014-10-30 19:31:23

是的，这是诀窍！谢谢Nico O的努力！我从来没有听说过“Flexbox”，我应该阅读flexbox的文章以更好地理解它。我现在唯一的问题是，如果容器div的最小宽度为100px，它将占用所有宽度以适应盒子div。盒子divs在行之间有一个自动边距以适应容器的宽度。我没有承诺，但是，但maby如果我已阅读文章，我可以删除该自动保证金并将其设置为5px，因此容器股利并不拉伸整个屏幕宽度。非常感谢Nico O！ – 807 2014-10-30 20:10:27

垂直浮动div - 向右溢出

回答

相关问题