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

概述我正在使用表格布局,并尝试将table-cell的孩子的高度设置为它的容器的100％.为什么这不会发生,你如何解决这个问题？ 我也尝试将表格单元格的高度设置为100％而没有成功. 我只想将图像对齐到容器的底部.如何在表格显示中做到这一点？ 每个表格单元格中的文本数量是动态的 小提琴：http://jsfiddle.net/3u3gpf2n/1/ 看来您正在尝试创建一个3列的2行表,但是只能使用单行 我正在使用表格布局,并尝试将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 >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 >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 >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垫片)作为表格.

总结

以上是内存溢出为你收集整理的html – 显示表格单元格高度100％对齐图像底部全部内容，希望文章能够帮你解决html – 显示表格单元格高度100％对齐图像底部所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。