1

我有一个高度为 100 像素但全宽（默认）的父 div。在里面我有很多 20px x 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>
4

2 回答 2

3

您可以使用 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;
}
于 2012-07-17T17:45:26.040 回答
1

您可以尝试使用 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 的列脚本。看起来您只是在样式表之后添加了 javascript，您可以继续使用新的列属性，而无需进行任何修改。我已经验证了它至少可以在 IE 9 中运行。

于 2012-07-17T17:52:09.157 回答