0

找到下面的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“一”的内容少，所以它的高度小，二的内容多，所以它的高度大。因为第二个 div 有更高的高度，所以第一行需要第二个 div 高度。现在第三个 div 进入第二行，我希望它占据第一行第一个 div 中未使用的空白空间。

我该如何为此编写样式？

问候，卡提克。

4

1 回答 1

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;
}
于 2013-02-06T09:04:44.433 回答