Question

我使用table布局并尝试将table-cell的孩子的高度设置为其容器的100％。为什么这不会发生？你如何解决这个问题？

我也尝试将表格单元格高度设置为100％而没有成功。

我想将图像对齐到容器的底部。我怎样才能在桌面显示中做到这一点？

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

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

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

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

Answer 2

我正在使用表格布局并尝试设置孩子的身高   table-cell的100％是它的容器。为什么这不会发生   你是如何解决这个问题的？

我也尝试将table-cell高度设置为100％而没有成功。

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

来自规范：

CSS height property

百分比
指定百分比高度。百分比是根据生成的框的高度计算的   包含块。如果包含块的高度不是   明确指定并且此元素没有绝对定位，该值计算为＆＃39; auto＆＃39;。

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

换句话说，如果您没有为包含块设置显式高度（并且子项没有绝对定位），则具有百分比高度的子元素将没有引用框架。

因此，您的代码中的问题归结为：您在父母height，ul，#container和{{1}上错过了body }。

DEMO：http://jsfiddle.net/sedetcc6/

我想将图像对齐到容器的底部。我怎样才能在桌面显示中做到这一点？

虽然vertical-align非常适合对齐表格单元格中的元素，但在这种特殊情况下，因为每个图像都有一个不能移动的兄弟，所以html属性没用。

但是图像可以通过绝对定位移动。试试这个：

vertical-align

DEMO：http://jsfiddle.net/sedetcc6/1/

注意：

原始加价无变化
为了记录，这个问题可以通过flexbox轻松解决，但我知道由于需要IE 8＆amp; 9浏览器支持。

Answer 3

我希望我能正确理解这个问题，但我的建议是让每个锚点display: table-cell使它们被强制到相同的高度，然后你可以将所有元素放在锚点内，甚至可以使用背景图像而不是<img />

JS fiddle here

Answer 4

您需要为所有元素设置一个高度，例如

*{
    height: 50px;
}

您将获得所需的结果：http://jsfiddle.net/asimplepeter/3u3gpf2n/10/

如果文字数量有问题，您可以为overflow: auto课程设置.header。

Answer 5

您的代码和显示属性，例如＆＃39; table＆＃39;和＆＃39; table-cell＆＃39;事情是正确的。

但问题是表格仅以自动高度呈现。因此，尽管您已设置容器高度，但表结构未使用适当的高度进行渲染。因此，与容器类一起，设置“＆＃39; ul”的高度。以及
关于图像的位置，您可以将margin-top设置为100％，或者通过计算图像的大小来减少500px容器高度，这将有助于您定位。

希望这能解答您的所有疑问

编辑由于设置边距是扩展表格高度，或者您可以使用下面的css属性

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

Answer 6

在这种情况下，我认为根据img更好地保持单元格的高度，因为它是静态的并且设置标题是绝对的。

类似的东西：

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/

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

6 个答案: