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

发布时间：2020-12-14 18:55:08 所属栏目：资源来源：网络整理

导读：我正在使用表格布局,并尝试将table-cell的孩子的高度设置为它的容器的100％.为什么这不会发生,你如何解决这个问题？我也尝试将表格单元格的高度设置为100％而没有成功. 我只想将图像对齐到容器的底部.如何在表格显示中做到这一点？每个表格单元格中的文本

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

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

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

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

小提琴：http://jsfiddle.net/3u3gpf2n/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,如果您具有用于HTML5标签的JS垫片)作为表格.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!