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 Multiple column layout但如果需要，这会在列的末尾将您的div减半。
来自FTlabs的 Columnflow 是这些CSS功能的高级实现，作为脚本，虽然未定义支持IE，但它可能不是polyfill。

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

div首先阻止阻塞，然后内联

1 个答案: