html - CSS 响应式网格 - 元素卡在高度较长的元素上

Question

我正在构建一个投资组合网站的一部分，该网站使用相对测量单位显示带有图像及其标题的 4 列网格，以便它随浏览器窗口的大小缩放。现在它工作正常，每个 .item 分配了一个属性 float:left 和 max-widths 定义为整体#container 宽度的百分比(在本例中为 1100px 或 68.75em)。它工作正常，但标题除外，标题位于跨度中每个图像的下方。当其中一个标题长于 220 像素(或容器的 20%)时，高度会增加并且下一行中的元素将“卡住”在上面。

我可以使用 PHP 轻松解决此问题，在每第 4 个 div 之后插入一个 clear:both div(以有效地在 html 中创建一个新的“行”)，但我计划使用媒体查询或其他一些设备来减少随着浏览器窗口缩小，列变为 3、2 和 1。如果我可以简单地通过 float 元素来定义行，那就更容易了。可能的解决方案？

样式:

body {
font-size: 100%;
line-height: 100%;  /* Neat */
font-family: Helvetica, Arial, sans-serif;
}

#container {
max-width: 68.75em;     /* 1100px */
margin: 40px auto;
border: 1px solid #000;
}

.item {
float: left;
    width: 20%;
max-width: 20%;
height: auto;
padding: 2.5%;
background-color: #eee;
}

.item img {
display: block;
    width: 100%;
max-width: 100%;
height: auto;
}

.item span {
    width: 100%;
max-width: 100%;
margin-top: 1em;
display: block;
text-transform: uppercase;
line-height: 1.5em;
}

HTML:

<div id="container" class="cf"> <!-- "cf" comes from my reset, it's a clear-fix --> 
  <div class="item">
    <img src="images/placeholder.png" height="220" width="220" alt="" title="" />
    <span>A Title that is Slightly Longer than the Others</span>
  </div>
  <div class="item">
    <img src="images/placeholder.png" height="220" width="220" alt="" title="" />
    <span>A Title</span>
  </div>

...(重复那些 div)

</div>

Answer 1

可能的选择:

1. 设置足够的高度来覆盖两行
2. .grid-item { 显示:内联 block ；垂直对齐:顶部； }
3. 将标题 span 更改为 div，设置 height 和 overflow: hidden