html - 如何用HTML + CSS实现如下布局？

Question

我将从我想要实现的 ASCII 艺术插图开始:

   Category title

  Title       Title
+-------+   +-------+
|       |   |       |
|       |   |       |
| Image |   | Image |
|       |   |       |
|       |   |       |
+-------+   +-------+
 Subtitle    Subtitle

   Category title

  Title       Title
+-------+   +-------+
|       |   |       |
|       |   |       |
| Image |   | Image |
|       |   |       |
|       |   |       |
+-------+   +-------+
 Subtitle    Subtitle

所以我有这些包含元素的类别。每个元素由一个标题、一个副标题和一个图像组成。图片大小不一。它们的宽度恒定为 150px，但高度范围从 150px 到 252px。我无法预测 future 会有什么尺寸，尽管它们应该在这个尺寸左右。您可以假设宽度恒定为 150px，高度可以在 150px 和 300px 之间变化。

当然，计数类别和每个类别中的元素是任意的。虽然在每个类别中至少会有一个元素(否则我不会显示类别)。标题和副标题的长度也是可变的，尽管它们大多都很短。

我要制作的效果如下:

• 元素标题和副标题呈现在图像旁边(上方和下方)，中间没有任何明显的空白。
• 当类别中的元素太多时，它们会开始换行并创建更多行。没有水平滚动。行应该清楚地彼此下方。随着窗口宽度的变化，元素会自动重新排列。
• 如果元素标题或副标题稍长，则应换行。它们不应明显超出图像宽度；
• 类别标题与上方和下方的元素行之间应该有一个清晰的空白。
• 类别标题在页面居中；元素标题和副标题相对于它们的图像居中。

我不关心效果是通过 TABLE、DIV 还是 The Force 实现的。我只是想让它看起来像那样。 :) 这可能吗？如果可以，该怎么做？

如果没有，谁能推荐一个替代布局，它可以封装相同的信息并且在不同的浏览器尺寸上看起来都不错？

Answer 1

Steven 打败了我，但我会多收一点钱 ;-)。这是符合您要求的快速解决方案的标记(CSS 应该在单独的文件中)。未决问题:

• 跨浏览器？尝试强制浏览器进入严格模式，以便只处理一个框模型(在 IE6 上尤其重要)
• 正如 Steven 指出的那样，图像高度必须固定(或容器高度)，但更大的问题是您需要包装较长的标题。我提供的标记和 CSS 处理得不好，但要让它正常工作意味着您必须决定标题的最大高度或放弃自动包装元素的要求(以便我们可以使用表格)。我建议将所有内容都放在图像下方，容器高度固定。

标记和 CSS:

<style type="text/css">

    h3.category { clear: both; }
    div.item { float: left; width: 83px; margin-right: 20px; }
    div.item img { width: 83px; height: 125px; }
    div.item h4 { margin-bottom: 3px; }
    div.item h5 { margin-top: 3px; }

</style>

<h3 class="category">Category <strong>title</strong></h3>

<div class="item">
    <h4>Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Subtitle</h5>
</div>

<div class="item">
    <h4>Longer Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Longer Subtitle</h5>
</div>

<div class="item">
    <h4>Very Long, Wrapping Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Very Long, Wrapping Subtitle</h5>
</div>

<div class="item">
    <h4>Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Subtitle</h5>
</div>

<h3 class="category">Category <strong>title</strong></h3>

<div class="item">
    <h4>Very Long, Wrapping Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Very Long, Wrapping Subtitle</h5>
</div>

<div class="item">
    <h4>Longer Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Longer Subtitle</h5>
</div>

<div class="item">
    <h4>Title</h4>
    <img src="http://www.freefoto.com/images/15/19/15_19_54_thumb.jpg" title="tree" />
    <h5>Subtitle</h5>
</div>