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

Question

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

我们想在产品描述旁边显示产品图片。图片HEIGHTS都一致；图像宽度不同。我们希望文本列宽度根据放置图像后剩下的内容动态调整大小。

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

<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 参数。包含图像的列将是图像的宽度。其他列将是剩下的......基本上是容器宽度减去图像宽度。

是否有一些很酷的 CSS 技巧可以做到这一点？我怀疑我可能只是将文本与图像的右侧或左侧对齐，但我很想知道是否有 CSS 方法可以实现这一点。

Answer 1

使用 float 应该可以正常工作 - 它不是一个柱状布局，东西只是......卡在它想挂的地方。

http://jsfiddle.net/FD5Uy/

这就是你要的吗？请注意，我只将 float 放在包含图像的 div 上，而不是将 float 放在图像上和文本上:

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