3

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

我可以使用 PHP 轻松解决此问题，在每 4 个 div 之后插入一个 clear:both 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>
4

2 回答 2

2

可能的选项：

  1. 设置height足以覆盖两行案例
  2. .grid-item { display: inline-block; vertical-align: top; }
  3. 将标题更改span为 a div，设置height和overflow: hidden
于 2012-12-07T00:58:20.977 回答
0

I would suggest giving it a short title. If that's not possible, you could try

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

The images will display appropriately, but the too-long titles will display over the image beneath said title. I don't know if this is acceptable for your needs or not, but you may find it useful.

于 2012-12-07T03:45:37.713 回答