Question

找到以下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>

在此示例中，我已逐列显示div（class =“number”）元素，每行2列。一，二是第一排，然后是三，四...... 第一个div“One”内容较少，因此它的高度较小，两个内容较多，因此其高度较大。因为第二个div有更高的高度，第一行占用第二个div高度。现在第三个div来自第二行，我希望它占据第一行中第一个div的空闲空间。

我怎样才能为此写出风格？

此致 KARTHIK。

Answer 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;
}

占据前一个div底部的自由空间

1 个答案: