將浮動div擴展爲父容器的100％寬度

我有一個包含註釋的div容器。它被設置爲向左浮動並且化身容器在它旁邊（也浮動到左側）。以下是截圖。將浮動div擴展爲父容器的100％寬度

enter image description here

白色留言容器的CSS：

.comment_content{ 
    float: left; 
/* 
    width: 86%; 
*/ 
    margin-left:5px; 
    padding-left: 15px; 
    background: url(http://video.chubbyparade.com/img/arrow_left.png) no-repeat 0 8px; 
}

我想設置這個容器，以填補在父容器的剩餘空間的100％。

如果我將它設置爲width：100％，我得到一個換行符（因爲它現在填充了父容器的寬度的100％）。

如何設置註釋容器來填充剩餘空間？我曾經把它設置爲寬度：86％。但是，如果我調整窗口大小（佈局不是固定寬度），那看起來不太好。

一張桌子是最簡單的方法。但是，有沒有解決方案與CSS？

來源

2012-06-01 reggie

我在人們如何使出渾身解數，以避免使用表格來呈現表格數據讚歎不已。 –

您可以通過使用CSS顯示屬性而不使用表來實現類似於表的行爲。也就是說，display：table table-row和table-cell – toniedzwiedz

我也建議在這裏使用表格。想象一下你的評論有很多線條：如果'comment_content'漂浮在左邊並且比圖像更高，你會在圖像下面遇到另一個問題。 – mixable

爲什麼不用浮動評論框，只是給一個足夠高的餘裕來清除頭像圖片。例如如果頭像寬度爲150像素，則評論框爲margin-left: 155px;，因爲評論框是一個div（塊元素），它自然會填充父div的剩餘空間的其餘部分。

的jsfiddle這裏例如： http://jsfiddle.net/UHksQ/

造型：

.avatar { 
    float: left; 
    width: 150px; 
} 
.comment { 
    margin-left:155px; 
}

來源

2012-06-01 20:19:12

戴夫·黑格的解決方案是合理的做法。如果真的，確實堅持使用浮動，您可以將容器的左側填充到肖像的寬度，然後爲肖像留出100％的餘量。這有點傻，但它會起作用。

的jsfiddle演示：http://jsfiddle.net/Malkyne/FZcPq/

來源

2012-06-01 20:50:40 Tess

將浮動div擴展爲父容器的100％寬度

回答

相關問題