Question

我正在构建投资组合网站的一部分，该网站使用相对测量单位显示带有图像及其标题的4列网格，以便根据浏览器窗口的大小进行缩放。现在它可以正常工作，每个.item分配一个float属性：left和max-widths定义为整个＃容器宽度的百分比（在这种情况下为1100px或68.75em）。它的工作正常，但标题除外，它们位于每个图像的下方。当其中一个标题长度超过220px（或容器的20％）时，高度会增加，下一行中的项目会“卡在”上。

我可以使用PHP轻松解决这个问题：在每个第4个div之后插入一个明确的div（在html中有效地创建一个新的“行”）但我打算使用媒体查询或其他一些设备来减少浏览器窗口收缩时，列为3,2和1。如果我可以通过浮动项目来简单地定义行，那将会更容易。可能的解决方案？

样式：

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

可能的选择：

将height设置为足以涵盖两行案例
.grid-item { display: inline-block; vertical-align: top; }
将标题span更改为div，设置height和overflow: hidden

Answer 2

我建议给它一个简短的标题。如果那是不可能的，你可以尝试

.item > span{
    height: 0;
    position: relative;
}

图像将正确显示，但过长的标题将显示在所述标题下方的图像上。我不知道这是否可以满足您的需求，但您可能会发现它很有用。

CSS Responsive Grid - 项目卡在高度较长的项目上

2 个答案: