2

示例：http: //jsfiddle.net/YUhgb/

HTML

<html>
    <body>
        <div class="left"></div>
        <div class="right">
            <div class="container">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <p>
                After Container
            </p>
        </div>
    </body>
</html>

CSS

.left{
    float: left;
    width: 150px;
    height: 700px;
    background-color:red;
}
.right{
    margin-left: 160px;
    background-color:blue;
}
.container:after{
    content: "";
    height: 0;
    clear: both;
    display: block;
}
.item{
    float:left;
    width: 21%;
    margin-right: 1%;
    margin-bottom: 10px;
    height: 200px;
    background-color:green;
}

问题是，如果左栏太长，浮动内容下方的内容会下降到左侧下方。在我的示例中，我希望文本After Container直接显示在绿色框下方。

如何应用 clear:left 使其仅影响右列？

4

4 回答 4

1

删除整个 CSS 块：

.container:after{
    content: "";
    height: 0;
    clear: both;
    display: block;
}

...并添加：

.container { overflow:auto; }

http://jsfiddle.net/YUhgb/12/

干杯

于 2012-04-24T20:19:36.787 回答
1

您可以通过将display: table和添加width: 100%;到具有container. 请参阅此处的工作示例：http: //jsfiddle.net/skip405/YUhgb/15/

于 2012-04-24T20:29:23.517 回答
0

你也可以浮动你的右栏吗？

修改示例：http: //jsfiddle.net/YUhgb/9/

于 2012-04-24T20:18:28.647 回答
0

我将其更改为float:left;，它显示了我想要的方式。.leftposition: absolute;

更新代码：http: //jsfiddle.net/YUhgb/17/

于 2012-04-24T20:43:01.673 回答