CSS浮動元素

當我在這裏（在正確的元素下）空間時，我怎樣才能做到這一行（紅色背景div）獲得100％的寬度？CSS浮動元素

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」類...或者尤爲明顯以得到一個想法：http://jsfiddle.net/TXDWj/37/

感謝大家

來源

2013-05-15 menocchio

我覺得我不明白你想做什麼：S爲什麼不設置'.row {... width：100％;}'？ – DaGLiMiOuX

因爲用行設置爲100％...所有都會在綠色的右邊div下去，我只想在綠色div的所有高度的文本（aqua div）下面有一行。 – menocchio

也..這個'真正的用法'..我不能刪除從行divs的浮動..所以，如果你知道一些可能性，以獲得該效果（http://jsfiddle.net/TXDWj/37/） – menocchio

您應該刪除從.row float和明確的花車左側。

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

UPDATED FIDDLE

（忽略的是，紅色背景變爲綠色的背景下，因爲顏色是僅用於演示。我還給予額外的保證金一些其他的DIV更密切近似佈局，但這只是爲了演示。）

來源

2013-05-15 15:26:42

紅div（.row div）不只是爲演示..其他div顏色只是演示建議是我的錯..我沒有這麼清楚你的問題。 .. 最後..我想..它不可能獲得這種效果... – menocchio

你可以用JavaScript/jQuery來做到這一點。 –

通過計算行的div和強制不同的CSS規則後第一個兩個？我覺得不是？我會嘗試 – menocchio

您需要更改寬度：100％;

來源

2013-05-15 15:26:51 Sudz

回答

相關問題