Html 如何用CSS实现这种布局？

我想实现这样的目标：

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

通常，当我有像A和B这样的浮动图像时，我会将容器

位置

放在

相对位置

，对于浮动图像，

绝对位置

，这样就可以了，但我对这里的文本有点迷茫

---

如果webkit浏览器有任何用处的话，这将用于webkit浏览器。

您知道图像A（大图像）的宽度。例如，标题位于

h1

中，文本位于

p

（或

div

）中，因此将这两个元素设置为左边距大于图像a的宽度

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

最后，我将有一个包装器

div

，带有

overflow:auto

，它有一个边框（如果需要的话），并允许在下面的元素之间留一个底部空白

部分答案：请参阅

---

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

您知道图像A（大图像）的宽度。例如，标题位于

h1

中，文本位于

p

（或

div

）中，因此将这两个元素设置为左边距大于图像a的宽度

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

最后，我将有一个包装器

div

，带有

overflow:auto

，它有一个边框（如果需要的话），并允许在下面的元素之间留一个底部空白

部分答案：请参阅

---

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

如果图像大小是固定的，将来不太可能更改，那么我建议对图像应用绝对位置（您所说的）。我猜你的问题是，如果文本太短，图像的高度会超过容器的高度。这很容易用最小高度固定：

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

您可以在此处查看演示：

这应该一直适用于IE7

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

---

我是黛比·乌娜·卡尼亚！；）

如果图像大小是固定的，将来不太可能改变，那么我建议对图像应用“绝对位置”（position absolute）（如您所说）。我猜你的问题是，如果文本太短，图像的高度会超过容器的高度。这很容易用最小高度固定：

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

您可以在此处查看演示：

这应该一直适用于IE7

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

---

我是黛比·乌娜·卡尼亚！；）

怎么了？你有一个例子吗？就在webkit上。。。这确实有帮助！但是如果你把目前为止的代码，html和css都放进去，会有更大的帮助？你有一个例子吗？就在webkit上。。。这确实有帮助！但是如果你把目前为止的代码，包括html和css，都放进去，会更有帮助。谢谢马克：）（可怕的小世界！）是的，就是这样。谢谢马克：）（可怕的小世界！）