如何用CSS实现这种布局？

Question

我想实现这样的目标：

• A）是方形图像，比如65x65。
• B）此图标是另一个图像 需要在A里面漂浮。
• C）行的最小长度是 A的高度。最大值取决于 文本的长度 描述。

通常当我有像A和B这样的浮动图像时，我会将我的容器position设为relative，将obsolute设为浮动图像，这样就可以了，但我会这里的文字有点遗失。

这只是在webkit浏览器上使用，如果它有用的话。

Answer 1

如果图像尺寸固定且将来不太可能改变，那么我建议将位置绝对应用于图像（您所说的）。我猜你的问题是，如果文字太短，图像的高度将超过容器的高度。这很容易通过min-height来解决：

.module {
    min-height: 65px; /*your image height*/
 }

您可以在此处观看演示： http://jsfiddle.net/RkeJJ/

这应该一直到IE7。

如果您的图像大小是可变的，那么我建议显示：table / table-row / table-cell，但这只适用于IE8 +和其他现代浏览器。

我对unacaña感到愤怒！;）

Answer 2

您知道图像A（大图像）的宽度。例如，标题位于h1，p（或div）中的文字，因此将这两个元素设置为左边距大于宽度图片A 。

然后，您可以将图像A浮动到左侧，并使用绝对定位将图标B放在图像上。

最后，我会使用div包装overflow: auto来设置边框（如果需要），并允许底部边距在以下元素之间提供空白。

部分答案：在http://jsfiddle.net/audetwebdesign/Nam52/

查看我的代码段

您只需在标题后添加日期元素。