我正在使用表格布局,并尝试将table-cell的孩子的高度设置为它的容器的100％.为什么这不会发生,你如何解决这个问题？
我也尝试将表格单元格的高度设置为100％而没有成功.
每个表格单元格中的文本数量是动态的
解决方法
看来您正在尝试创建一个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垫片)作为表格.
