這兩個人如何使用不同寬度的CSS內容創建兩列動態佈局？

Question

我正在嘗試爲產品信息頁面創建一個CSS，並且在根據內容動態設置寬度時遇到了一些問題。

我們希望在產品描述旁邊展示產品圖片。圖像高度都一致;圖像寬度各不相同。我們希望根據放置圖像後留下的內容動態調整文本列寬。

它變得棘手的地方在於我們希望能夠靈活地在右列或左列中使用圖片。

<div id="leftcolumn"><img src="yellowscraper"></div> 
<did id="rightcolumn"><p>[yellowscraper text]</p></div> 

<div id="leftcolumn"><p>[brown scraper text]</p></div> 
<div id="rightcolumn"><img src="brownscraper"></div> 

<div id="leftcolumn"><img src="marmite"></div> 
<did id="rightcolumn"><p>[marmite text]</p></div> 

<div id="leftcolumn"><p>[yellowscraper text]</p></div> 
<div id="rightcolumn"><img src="yellowscraper"></div> 

考慮：

#leftcolumn {float: left} 
#rightcolumn {float: right} 
.clear { clear: both;} 

但我不知道如何定義width參數。包含圖像的列將是圖像的寬度。 OTHER列將保留......基本上是容器寬度減去圖像寬度。

有沒有一些很酷的CSS技巧來完成這個？我懷疑我可能只是將文本對齊到圖像的右側或左側，但我很想知道是否有CSS方法來實現此目的。

Answer 1

使用浮動應該工作正常 - 它不是一個柱狀的佈局，只是...掛在它想掛起的地方。

http://jsfiddle.net/FD5Uy/

是你問什麼？請注意，我只是把浮在包含圖像的股利，而不是留在圖像上和右邊的文字：直接

<div class="float-left"><img></div> 
<p> 
    The image will be to the left of this paragraph, 
    I don't need to float this tag to the right... 
</p> 
<div class="float-right"><img></div> 
<p> 
    Same same... 
</p> 

您可以將浮動類的圖片，如果你不需要在div對於其他任何東西，它仍然可以正常工作。

Answer 2

老實說，做到這一點的最好方法是表格。只是使無形的邊界，當你做到這一點，並且浮動圖片的表格內，有如下CSS：

#left { 
float:left; 
} 
#right { 
float:right; 
} 

接下來，設置你的表是這樣的。

<table> 
<tr> 
<td><div id="left"><img src="yellowscraper"></div></td> 
<td><div id="right"><p>[yellowscraper text]</p></div></td> 
</tr> 
<tr> 
<td><div id="left"><p>[brownscraper text]</p></div></td> 
<td><div id="right"><img src="brownscraper"></div></td> 
</tr> 
</table> 

評論如果您有任何疑問。