占用前一个div底部的空闲空间答案

【问题标题】：Occupy the free space at bottom of previous div占用前一个div底部的空闲空间
【发布时间】：2013-01-21 09:48:09
【问题描述】：

找到下面的html代码，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
.numbercontainer{
    float:left;
    width:220px;
}
.number{
    float:left;
    width:100px;
    margin-right: 10px;
}
.head{
    float:left;
    width:100px;
    background-color:#29ABE2;
}
li {
    margin-left: 20px;
}
</style>
</head>
<body>
    <div class="numbercontainer">
        <div class="number">
            <div class="head">One</div>
            <li>1</li>
        </div> 
        <div class="number">
            <div class="head">Two</div>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </div> 
        <div class="number">
            <div class="head">Three</div>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </div> 
        <div class="number">
            <div class="head">Four</div>
            <li>1</li>
        </div> 
        <div class="number">
            <div class="head">Five</div>
            <li>1</li>
            <li>2</li>
        </div> 
        <div class="number">
            <div class="head">Six</div>
            <li>1</li>
            <li>2</li>
        </div>      
    </div>
</body>
</html>

在这个示例中，我在每行 2 列中按列显示了 div(class="number") 元素。一个，两个在第一排，然后是三个，四个…… 第一个 div "One" 的内容少，所以高度小，二的内容多，所以高度大。因为第二个 div 的高度更高，所以第一行采用第二个 div 高度。现在第三个 div 在第二行，我希望它占据第一行第一个 div 中未使用的空白空间。

我该如何为此编写样式？

问候，卡提克。

【问题讨论】：

有点难以理解你的意思。你能创建一个jsfiddle吗？
@Aaron: jsfiddle 链接：jsfiddle.net/2jk6U 我需要第二行的第一列需要占用第一行第一列的空白空间。如何做到这一点？

标签： html

【解决方案1】：

左栏向左浮动，右栏向右浮动：

http://jsfiddle.net/2jk6U/1/

.number{
    width:100px;
    margin-right: 10px;
}
.number:nth-child(odd) {
    float:left;
}
.number:nth-child(even) {
    float:right;
}

如果您需要更高的跨浏览器兼容性，请将 class="even" 和 class="odd" 添加到相应的元素中。和样式：

http://jsfiddle.net/2jk6U/2/

.number{
    width:100px;
    margin-right: 10px;
}
.number.odd {
    float:left;
}
.number.even {
    float:right;
}

【讨论】：

如果每行有 4 列，我该怎么做？
在这种情况下，您必须使用称为“瀑布”的技术，动态计算每个 div 的位置，例如 pinterest.com。当然，您可以使用第三方插件/库来实现它。喜欢masonry.desandro.com
请选择一个插件，并阅读它的手册。或者只是谷歌瀑布或 pinterest，你会找到一个演示。
顺便说一句，看看这个：jsfiddle.net/2jk6U/4 使用 css 列，不适合你，不支持旧浏览器。只是想让你知道，这也是一种选择。