html - 动态 float 2列

Question

http://jsfiddle.net/ny3es0dk/

#floating_body_container {
border: 1px solid #ddd;
padding: 5px;
float: left;
width: 450px;
height: auto;
margin: 5px;
background: #eee;
}

我正在尝试仅使用 html/css 创建响应式“更新流”(尽管如果绝对必要，我可以使用 js/jquery)。问题是新“行”上的每个新 div 只会从最后一行的较高 div 的底部开始。理想情况下，div 会转到上面较短的 div 的一侧。您可以在 jsfiddle 上看到说明的问题。

谢谢。

Answer 1

#floating_body_container:nth-child(even) {
    float: right;
}

解决问题。