我想将图像列表与“底部”对齐,如何使用 CSS 实现这一点?
背景:我想让一组照片底部对齐,图像大小不同。
<div>
<ul>
<li> <!-- image 1-->
<li> <!-- image 2-->
<li> <!-- image 3-->
</ul>
</div>
谢谢。
我想将图像列表与“底部”对齐,如何使用 CSS 实现这一点?
背景:我想让一组照片底部对齐,图像大小不同。
<div>
<ul>
<li> <!-- image 1-->
<li> <!-- image 2-->
<li> <!-- image 3-->
</ul>
</div>
谢谢。
所有这些绝对定位的问题是 li 元素将没有高度,因为图像元素是绝对的并且不再推动任何布局。通常这是一个糟糕的解决方案。
根据您的需要,这可能会起作用:
li {
display: inline;
vertical-align: bottom;
}
现场示例:http: //mooshell.net/zBCGW/
ul{ li-style-type: none;}
li{position:relative; float: left; width:100px; height: 100px; }
li img { display: block; position: absolute; bottom: 0; }
然后
<ul> <li><img /></li>...</ul>
下面的 CSS 应该可以解决问题:
ul{ li-style-type: none;}
li img {position:absolute;bottom:0;}
li {float:left;vertical-align:bottom;}
试试这个:
li img{
position:absolute;
bottom:0;
}
li{
position:relative;
}
编辑:我刚刚读到它们打算与 li 元素的底部对齐。我更新了代码,因此 img 将与 li 元素的底部对齐。