显示表格单元格高度100％对齐图像底部

Question

我正在使用 table 布局，尝试将 table-cell 的子元素高度设置为其容器的 100%。为什么会出现此问题？如何解决？

我还尝试过将 table-cell 的高度设置为 100%，但没有成功。

我想仅将图像对齐到容器底部。在表格中如何实现这一点？

每个表格单元格中的文本数量是动态的。

Fiddle： http://jsfiddle.net/3u3gpf2n/1/

- monokh

---

你的例子中没有包含表格。 - Sleek Geek

他在CSS中使用表格。 - max

我们可以使用flex吗？因为使用flexbox将一个子元素对齐到顶部，另一个对齐到底部非常容易。 - woestijnrog

@woestijnrog 尽管我很喜欢使用 flex-box，但我需要支持 IE8 和 IE9 :) - monokh

div { 最小高度：2.5em; } 但这很不规范 :) ... 但绝对跨浏览器。 - sodawillow

Answer 1

看起来你想创建一个3列2行的表格，但只使用单行以保持你的标记语言的语义化。如果没有flexbox，将图片分配到底部将需要一些CSS技巧。

一个例子，应该符合你的要求：（1）跨浏览器，包括IE兼容性（2）允许在框中使用任意文本：

*{
    padding: 0;
    margin: 0;
}

#container{
    width: 500px;
    margin: 0 auto;
}

ul{
    list-style-type:none;
    display: inline-table;
}

li{
    position: relative;
    /* image width / (image height * column count) */
    padding-bottom: 11.764705882%;
    display: table-cell;
    background: red;
    /* 100 / column count */
    width: 33.333%;
}

a{
    color: white;
}

img{
    width: 100%;
    position: absolute;
    bottom: 0;
}

<div id="container">
<ul>
    <li><a href><div class="header">Xiao Huang</div>
        <img src="http://3door.com/sites/default/files/styles/ablum_306_108/public/special/xiao_huang_ren_fu_ben_.jpg?itok=cPnwgTyV" /></a></li>
    <li><a href><div class="header">Xiao Huang</div>
        <img src="http://3door.com/sites/default/files/styles/ablum_306_108/public/special/xiao_huang_ren_fu_ben_.jpg?itok=cPnwgTyV" /></a></li>
    <li><a href><div class="header">Xiao Huang Xiao Huang Xiao Haung</div>
        <img src="http://3door.com/sites/default/files/styles/ablum_306_108/public/special/xiao_huang_ren_fu_ben_.jpg?itok=cPnwgTyV" /></a></li>
    </ul>
</div>

我已经为LI添加了相对定位，并绝对定位了图片。为确保一切正常工作，我给单元格设置了基于百分比的宽度。我还在底部添加了填充。

唯一不包括的是光标完全下移。如果用户在图像和文本之间单击，则不会触发锚点。

要解决此问题，请考虑删除UL/LI，将锚标记样式设置为表格单元格，并将包装DIV（或NAV，如果您有HTML5标记的JS shim）设置为表格。

- Hans

---

这是我见过的最糟糕的解决方案。虽然可以工作，但是那个 image width / (image height * column count) 的计算方法.. 真让人头疼。如果图像高度不同，那就有点麻烦了，不是吗？ - MortenMoulder

Answer 2

我正在使用表格布局，试图将 table-cell 的子元素高度设置为其容器的 100%。为什么会失败，如何解决？

我也尝试将 table-cell 的高度设置为 100%，但没有成功。

在 CSS 中使用百分比高度时，您需要为所有父元素（包括 body 和根元素 html）指定高度。

从规范中可以看出： CSS height property percentage 指定百分比高度。百分比是相对于生成的框的包含块的高度计算的。如果未明确指定包含块的高度且此元素未绝对定位，则该值计算为“auto”。

auto 高度取决于其他属性的值。

换句话说，如果您没有为包含块设置明确的高度（并且子元素未被绝对定位），那么具有百分比高度的子元素将没有参照物。因此，在您的代码中存在的问题可以归结为：在父元素ul、#container、body和html上缺少height。演示：http://jsfiddle.net/sedetcc6/

我想仅将图像与容器底部对齐，如何在表格显示中做到这一点？

尽管vertical-align非常适用于将元素对齐到表格单元格中，但在这种情况下，由于每个图像都有一个不得移动的兄弟元素，因此该属性是无用的。但是，可以使用绝对定位来移动图像。请尝试以下操作：

li{
    display: table-cell;
    background: red;
    height: 100%;
    position: relative; /* establish nearest positioned ancestor for abs. positioning */
    width: 33.33%; /* new */    
}

img{
    width: 100%;
    position: absolute; /* new */
    bottom: 0; /* new */
}

演示: http://jsfiddle.net/sedetcc6/1/

注:

• 原始标记无更改
• 记录一下，这个问题可以很容易地通过flexbox解决，但我理解由于需要支持IE 8和9浏览器，这不是一个选项。

- Michael Benjamin

Answer 3

你所需要做的就是为所有元素设置一个高度，例如：

*{
    height: 50px;
}

你将会得到你所期望的结果：http://jsfiddle.net/asimplepeter/3u3gpf2n/10/

如果文字的数量成为了问题，你可以给你的.header类设置overflow: auto。

- just another profile name

Answer 4

我希望我能正确理解问题，我的建议是使每个锚点 display: table-cell，这样它们就会被强制具有相同的高度，然后您可以定位所有在锚点内的元素，甚至可以使用背景图像代替 <img />

JS fiddle here

- Brian John

Answer 5

你的代码和显示属性，如“table”和“table-cell”，都是正确的。

1. 但问题在于表格只能自动设置高度。因此，即使您已经设置了容器的高度，表格结构也没有以正确的高度呈现。因此，除了容器类之外，还要为“ul”设置高度。
2. 关于图像的位置，您可以将margin-top设置为100％，或者通过计算图像的大小并从500px容器高度中减去该大小来帮助您定位。

希望这回答了您所有的疑问。

编辑：由于设置边距会扩展表格高度，因此您可以使用以下CSS属性作为替代方法。

transform: translateY(Y);
transform-origin: left top;

- Mallikarjuna

Answer 6

在这种情况下，我认为最好根据图像维护单元格的高度，因为它是静态的，并将标题设置为绝对位置。

类似这样：

li{
    position: relative;
    display: table-cell;
    background: red;
    height: 100%;
    vertical-align: bottom;
}



.header{
    width: 100%;
    position: absolute;
    display: block;
    color: white;
    background: blue;
}

http://jsfiddle.net/3u3gpf2n/12/

- Túlio Castro