0

也是一个小提琴。

如何获取绝对元素的容器，根据其中绝对定位元素的宽度自动调整其宽度。

或者，可以删除定位，但不可能让元素（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>

下图。

在此处输入图像描述

4

2 回答 2

2 
<!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的s都在uls里面！

于 2013-02-08T19:43:00.253 回答
0

如果您在加载图像后运行此 Javascript 代码 (jQuery)，则可以解决问题：

http://jsfiddle.net/turiyag/KA2F5/5/

$.each($("ul li"),function(idx,item) {
    var maxWidth = 0;
    var liElement = $(this);
    $.each(liElement.find("img"),function(idx2,imgelem) {
        if($(this).width() > maxWidth) maxWidth = $(this).width();
        liElement.css("width",maxWidth + "px");
    });

});
于 2013-02-08T19:46:32.660 回答