位置 div 低于其他 div，除非高度超过

Question

我有一个外层div，高度为400px；

在这个 div 中，我有几个具有动态高度的 UL（每个 UL 的 LI 数量可变）。

我希望div先垂直放置，如果不合适，UL应该放在div旁边（右）。

假设第一个 UL 的高度为 100px，第二个 UL 的高度为 250px，第三个 UL 的高度为 300px。

第一个和第二个应该放在一起 (100 + 250 < 400)。第三个，应该添加到第一个。

如何使用 CSS/HTML（没有 JS）实现此目的。我现在有这个：

.outer {
height: 400px;
width:100%;
float:left;
background-color: yellow;
}
.element {
background-color:red;    
float:left;
overflow:show;
}

当前fiddle： http://jsfiddle.net/L9c9a58n/

Answer 1

您可以使用 CSS3 列并删除您的 float，
例如http://jsfiddle.net/ossym8zr/2/

.outer {
    height: 400px;
    width:100%;
    background-color: yellow;

    -webkit-columns: 3;
    -moz-columns: 3;
     columns:3;
}


.element {
    margin: 0 0 20px 0;
    width: 33%;
}

当某列没有可用空间时，下一个列表将放在相邻的列中。您可以调整列数和列宽。

如果您还想避免在列表中中断，那么您可以使用

-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;

如 http://caniuse.com/#feat=multicolumn 所述，CSS3 列得到广泛支持（IE < 10 除外）

另一种方法是display: flex在多列（轴）上强制列对齐和换行
例如http://jsfiddle.net/wfsyqnpz/1/

.outer {
    ...
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

跨浏览器对 flexbox 模块的支持非常接近 CSS3 columns 但它需要仔细声明在各种浏览器上实现的所有语法变体。有关详细信息，请参阅 http://css-tricks.com/snippets/css/a-guide-to-flexbox/

位置 div 低于其他 div，除非高度超过

Position div below other div, except when height exceeds

css

height