0

所以，这里的瘦...

我有一个页面，其中包含一个列表display:table-cell。随着浏览器宽度的调整，列表的内容（锚点）可能会换行到 2 行。问题是不换行到 2 行的锚不会保持 100% 的高度。

CSS...

.home .pushes ul {display:table;}
.home .pushes ul li {display:table-cell; vertical-align:middle; width:25%; background-color:#e5a015; color:#ffffff;}
.home .pushes ul li a {display:block; padding:4em 0; padding:4rem 0;}

因此， 的高度<li>应由 的高度和填充确定<a>。但是，既然是<display:table-cell>，高度是由最高者决定的<a>。

好的，所以只需设置a {height:100%;}. 但是，然后，锚不保留填充。所以，只是设置li {height:160px;}或其他东西。但是，锚点不是垂直居中的。所以，只需设置li {line-height:160px;}. 但是，当它包裹到 2 行时，锚是巨大的。

那么，男人要做什么呢？

我能做到li {display:inline-block;}。但我希望所有盒子的高度相同。

JJ

编辑...

为后代包含的 HTML...

<ul>
    <li>bleh</li>
    <li>bleh</li>
</ul>

JJ

编辑 2...

锚点背景颜色是没有增长其父级的全部高度。

注意底部的 4 个框

我没有意识到我可以上传图片。谢谢你的提示。

JJ

4

1 回答 1

3

解决此问题的最佳方法是使用位置：相对和位置：绝对。

例子：

li {
  position: relative;
}

li a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

但是，上述方法不起作用，因为您的 li 使用的是“display: table-cell;” 和 position: relative 没有为表格单元格定义（请参阅：在 TD 中使用相对位置/绝对位置？）。

因此，您唯一的选择是使用 Javascript 来完成这项工作。有很多解决方案，但这里有一个：

使用 jQuery 调整大小方法 ( http://api.jquery.com/resize/ ) 来跟踪窗口何时调整大小。当窗口调整大小时，修改锚标记的填充，使其继续覆盖整个空间。

于 2012-10-08T02:38:20.253 回答