两个如何使用CSS从不同宽度的内容创建两列动态布局？

Question

我正在尝试为产品信息页面创建CSS，并且在根据内容动态设置宽度时遇到一些问题。

我们希望在产品说明旁边显示产品图片。图像HEIGHTS都是一致的;图像WIDTHS各不相同。我们希望文本列宽度根据放置图像后剩余的内容动态调整大小。

更棘手的是我们希望灵活地使用右列或左列中的图像。

<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上，而不是放在图像上，而是放在文本上：

<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，你可以将float类直接应用于你的图像，它仍然可以正常工作。

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>

如果您有任何问题，请发表评论。