Question

我有一个外部div，高度为400px;

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

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

因此，假设第一个UL高度为100px，第二个UL高度为250px，第三个高度为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;
}

目前的小提琴： http://jsfiddle.net/L9c9a58n/

Answer 1

您可以使用CSS3列并删除float s，
例如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之下，高度超过时除外

1 个答案: