CSS - 簡單的兩列

我有一個流體頁（寬度爲100％），與這裏面：CSS - 簡單的兩列

[image-fixed-width] | [text-fluid-width -----------------------------------] 
        | ----------------------------------------------------- 
        | -----------------------------------------------------

我下一步需要的圖像文字不環繞，但旁邊顯示它（如圖所示），就像另一列。同時，文本需要跨越整個頁面寬度。這將很容易通過設置文本左邊距，但問題是我不知道圖像的確切寬度。圖像大小可以變化...

有沒有解決方案嗎？

來源

2010-07-06 Alex

嘗試添加overflow：hidden;到您的內容分區。這應該強制它堅持你的專欄。

http://jsfiddle.net/BG7FA/

編輯這不會在IE6工作（去圖）

來源

2010-07-15 19:28:07

聖潔的廢話，那工作:) 謝謝 – Alex 2010-07-16 12:38:54

溢出：隱藏是魔術......它清除浮動，它強制列，它修復佈局。 – 2010-07-16 15:22:16

在兩個元素上合併float: left與文本上的display: block。

來源

2010-07-06 14:15:47

這是行不通的。 http://jsfiddle.net/Sdvt3/綠色應該伸展以填充剩餘的空間。 – icktoofay 2010-07-06 14:30:36

對於綠色伸展，您需要基於表格的佈局，靜態尺寸或JavaScript。 – 2010-07-06 14:33:07

更簡單的方法是使用2個單元格創建一個表格，一個用於圖像，另一個用於文本。你不會使用css，但它可以與任何瀏覽器一起使用。

來源

2010-07-15 19:20:01

這是一個猜測，但我希望它的工作。

<div style='width:100%; overflow:hidden'> 
    <img style='float:left'/> 
    <div style='float:left'>my text</div> 
</div>

的邏輯是一個div（即使是浮動DIV）應擴大以填充可用的空間，並且父不會拉伸或允許溢出既是參數被設定。

來源

2010-07-15 19:38:52 SamGoody

CSS - 簡單的兩列

回答

相關問題