还有一个 fiddle .
如何获取绝对元素的容器，根据其中绝对定位元素的宽度自动调整其宽度。
或者，可以删除定位，但不可能使元素 (img) 垂直对齐到底部。
ul {}
ul li {min-width:120px;height:200px;border:1px solid;float:left;margin:5px;position:relative;}
ul li img {position:absolute;bottom:0;display:block;}
ul li a {}
<ul>
<li><a href="#">Andrew</a>
<span><img src=http://ecx.images-amazon.com/images/I/51OcPyDBQ7L._SL160_.jpg></span> </li>
<li><a href="#">Splog</a>
<span><img src=http://ecx.images-amazon.com/images/I/51uhWLjlvGL._SL160_.jpg></span></li>
</ul>
下图。
最佳答案
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<style>
ul {}
li {min-width:120px;height:200px;border:1px solid;float:left;margin:5px;position:relative;display: table;}
li img {bottom:0;display:block;}
li a {}
li span {display: table-cell; vertical-align: bottom;}
</style>
<ul>
<li><a href="#">Andrew</a>
<span><img src=http://ecx.images-amazon.com/images/I/51OcPyDBQ7L._SL160_.jpg> </span> </li>
<li><a href="#">Splog</a>
<span><img src=http://ecx.images-amazon.com/images/I/51uhWLjlvGL._SL160_.jpg> </span></li>
</ul>
</body>
</html>
神奇之处在于 display: table、display: table-cell 和 vertical-align: bottom。您还必须从图像中删除绝对定位。
另请注意，我已将所有出现的 ul li 更改为 li？是的，那是因为所有 li 都在 ul 中!
关于css - 通过绝对定位的内部元素或垂直对齐底部调整容器宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14779949/