0

当这个空间（在右侧元素下）时，我如何才能使行（红色背景 div）获得 100% 的宽度？

演示：http: //jsfiddle.net/TXDWj/

html代码：

 <div class="left"></div> <div class="right"></div>

 <div class="text">Lorem ipsum dolor sit amet...</div>

 <div class="row">Lorem ipsum dolor ....</div>

 <div class="row">Lorem ipsum dolor sit amet...</div>

 <div class="row">Lorem ipsum dolor sit amet...</div>

 <div class="row">Lorem ipsum dolor sit amet..</div>

这个CSS代码：

.right {width:170px; height:250px; float:right; background:lime;}
.left {width:60px; height:100px; float:left; background:blue;}
.text {float:left; background:aqua; padding:10px; width:400px}
.row {float:left; background:red; margin:5px 0 0 60px; padding:10px; width:60%;}

更新：

预期行为可以在这里看到：http: //jsfiddle.net/TXDWj/22/

但没有“row_extra”类......或更好的观点来获得一个想法：http: //jsfiddle.net/TXDWj/37/

感谢大家

4

2 回答 2

0

您应该从左侧移除浮动.row并清除左侧的浮动。

.row {
    background: red;
    margin: 5px 0 0 60px;
    padding: 10px;
    clear: left;
}

更新的小提琴

（忽略红色背景在绿色背景下，因为颜色仅用于演示。我还为其他一些 DIV 提供了额外的边距，以更接近您的布局，但这只是为了演示。）

于 2013-05-15T15:26:42.933 回答
0

您需要更改宽度：100%；

于 2013-05-15T15:26:51.470 回答