html - div 的 go 先阻塞，再内联

Question

我在父 div 中有一堆 div。我希望子 div 一个在另一个之上（块），但是当它们超过父 div 的高度时，我希望它们向右（内联）。我附上了一张图片和我的代码显示了这个问题。

HTML 代码：

<div id="howhigh">
<div class="part">hi</div>
<div class="part">hi</div>
<div class="part">hi</div>
<div class="part">hi</div>
<div class="part">hi</div>
<div class="part">hi</div>
<div class="part">hi</div>
<div class="part">hi</div>
<div class="part">hi</div>
<div class="part">hi</div>
<div class="part">hi</div>
<div class="part">hi</div>
<div class="part">hi</div>
<div class="part">hi</div>
<div class="part">hi</div>
<div class="part">hi</div>
</div>

CSS 代码：

#howhigh {
    width: 50%;
    height: 30%;
    border-style: solid;
    border-color: black;


}

.part {
    width: 10%;
    display: block;
    border-style: solid;
    border-color: black;
}

Answer 1

您可以使用CSS3 多列布局，但如果需要，这会将您的 div 在列末尾减半。
FTlabs的 Columnflow 是这些 CSS 功能作为脚本的高级实现，虽然未定义对 IE 的支持，但它可能不是 polyfill。

否则，您必须通过将一堆 div 包装在容器中来创建列