Question

我将从我想要实现的目标的ASCII艺术插图开始：

   Category title

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

   Category title

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

所以我有这些包含项目的类别。每个项目包括标题，字幕和图像。图像大小不同。它们的宽度恒定为150px，但高度范围从150px到252px。我无法预测将来会有多大的尺寸，尽管它们应该在这个尺寸附近。您可以假设宽度恒定为150px，高度可以在150px和300px之间变化。

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

我想要创建的效果如下：

项目标题和副标题紧挨着图像（上方和下方）呈现，中间没有任何明显的空白。
当某个类别中的项目太多时，它们会开始换行并创建更多行。没有水平滚动。行应该明显在彼此之下。随着窗口宽度的变化，项目会自动重新排列。
如果项目标题或副标题稍长，则应该换行。它们不应显着超出图像宽度;
类别标题应在其与上下项目行之间有明确的空白。
类别标题以页面为中心;项目标题和副标题相对于其图像居中。

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

如果没有，任何人都可以建议一个替代布局，它会封装相同的信息并且在不同的浏览器尺寸上看起来不错吗？

Answer 1

更新：此代码可在Opera 9.51，FF 3.0和IE7中运行并进行测试。

我这样做会得到报酬吗？ ;）

有很多方法可以实现这一目标。有一点是肯定的。你不能有不同的高度。如果图像上的高度不同，则div将无法正确对齐。这是HTML代码：

<div id="outerContainer">
  <div class="container">
    <div class="categoryTitle">Category title here</div>    
    <div class="itemTitle">Square image </div>
    <div class="myImage"> <img class="myImage" src="http://upload.wikimedia.org/wikipedia/commons/thumb/archive/8/85/20060705145122!Smiley.svg/120px-Smiley.svg.png" /> </div> 
    <div class="subTitle">Subtitle here </div>
  </div>

  <div class="container">
    <div class="categoryTitle">Category title here</div>    
    <div class="itemTitle">High Image</div>
    <div class="myImage"> <img class="myImage" src="http://www.norwegianfashion.no/wp-content/uploads/fashion_shows/2009/Moods%20-%20feb/_SPS7281.jpg" /> </div> 
    <div class="subTitle">Subtitle here </div>
  </div>

  <div class="container">
    <div class="categoryTitle">Category title here</div>    
    <div class="itemTitle">High Image </div>
    <div class="myImage"> <img class="myImage" src="http://www.norwegianfashion.no/wp-content/uploads/Fashion_week/spring_09/regine_mowill/_SPS7094.jpg" /> </div> 
    <div class="subTitle">Subtitle here </div>
  </div>

  <div class="container">
    <div class="categoryTitle">Category title here</div>    
    <div class="itemTitle">Wide Image </div>
    <div class="myImage"> <img class="myImage" src="http://www.norwegianfashion.no/wp-content/uploads/Fashion_week/spring_09/pling/_SPS7181_copy.jpg" /> </div> 
    <div class="subTitle">Subtitle here </div>
  </div>   
</div>

css：

#outerContainer {
  width: 350px;
  border: solid 1px #777;
  overflow: auto;
  text-align: center;
}

.categoryTitle {
  font-weight: bold;
}
.container {
  float: left; 
  border: solid 1px #ccc;
  height: 270px;
  width: 150px;
  margin: 10px 5px 10px 5px;
}

#outerContainer .myImage {
  max-height: 200px;
  max-width: 150px;
  height: expression(this.height > 200 ? 200 : true);
  width: expression(this.width > 150 ? 150 : true);    
}

.imgContainer {
  overflow: hide;
}

Answer 2

史蒂文打败了我，但我会收取更多费用;-)。这是符合您要求的快速解决方案的标记（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>

Answer 3

支持rpflo进行跨度评论。这适用于ie7 / 8，ff3和chrome / safari。

<div class="cat">
  <h2>Category 1</h2>
  <span class="img">
    <h3>Title 1 with a long title wider than 150px</h3>
    <img src="yourimage.png" />
    <h4>Subtitle 1</h4>
  </span>
</div>

CSS：

div.cat { 
  overflow:auto;
  margin-bottom:15px; 
}
div.cat span.img { 
  display:inline-block;
  vertical-align:top; 
  width:150px;
  margin-right:15px;
  text-align:center; 
}
div.cat span.img h3, div.cat span.img h4 { 
  margin:0; 
}

Answer 4

我认为这种布局最简单的方法是使用css框架。简单网格布局的最佳选择是http://960.gs/

易于使用，浏览器兼容性也没有问题。

如何在HTML + CSS中实现以下布局？

4 个答案: