html - 显示表格单元格高度 100% 对齐图像底部

Question

我正在使用 table 布局并尝试将 table-cell 的子项的高度设置为其容器的 100%。为什么这没有发生，您如何解决这个问题？

我还尝试将表格单元格高度设置为 100%，但没有成功。

我只想将图像与容器底部对齐。我怎样才能在表格显示中做到这一点？

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

fiddle :http://jsfiddle.net/3u3gpf2n/1/

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 添加了一个相对位置，并对图像进行了绝对定位。为了确保一切正常，我给了单元格一个基于百分比的宽度。我还在底部添加了填充。

这不包括的一件事是光标一直向下。如果用户在图片和文字之间点击，则不会触发 anchor 。

要解决此问题，请考虑删除 UL/LI，并将 anchor 标记样式设置为表格单元格并将包装 DIV(或 NAV，如果您有用于 HTML5 标记的 JS 垫片)样式设置为表格。