CSS浮动元素

Question

我是如何做行的（红色背景div）获得100％宽度时为空格（在右边元素下）？

DEMO：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%;} 

更新

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

但是没有“row_extra”类...或者是为了得到一个想法的beter视图：http://jsfiddle.net/TXDWj/37/

感谢所有人

Answer 1

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

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

UPDATED FIDDLE

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

Answer 2

您需要更改宽度：100％;