css - 将 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/了解更多信息