Question

也是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>

下图。

enter image description here

Answer 1

<!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 s！

内

Answer 2

如果你在加载图像后运行它，这个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");
    });

});

通过绝对定位的内部元素或垂直对齐底部来调整容器宽度

2 个答案: