Question

我的父div高度为100 px但是全宽（默认值）。在里面我有很多20px乘20px的div。当孩子div即将到达底部时，我希望下一个开始包装。也就是说，它们应该开始显示在右边。换句话说，我不希望滚动发生。但包装。

<div id="parent" style="height:100px">
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   ............
</div>

Answer 1

您可以使用CSS3列 - http://jsfiddle.net/spbqh/

#parent {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;

    background: #eee;
}

div > div {
    height: 20px;
    width: 20px;
    background: beige;
}

Answer 2

您可以尝试使用CSS3列。不幸的是，我相信它们目前仅适用于Firefox和Chrome，因此它在IE中无效。

http://jsfiddle.net/Lf5Ma/

<div id="parent">
    <div id="test">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>

        <!-- Snip -->

        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

...和CSS：

#parent{
    position:relative;
    height:110px;
    width:100%;
    border:1px solid red;
}

#test{
    height:100%;

    -webkit-column-width:25px;
       -moz-column-width:25px;
            column-width:25px;    

    -webkit-column-gap:0px;
       -moz-column-gap:0px;
            column-gap:0px;
}
.child{
    width:20px;
    height:20px;
    border:1px solid #000;
}

修改：
我找到了一个基于javascript的column script可以工作。看起来您只需在样式表之后添加javascript，您就可以继续使用新的列属性而无需进行任何修改。我已经验证它至少可以在IE 9中运行。

在固定高度父div中有一些子级div包装

2 个答案: