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の中にあるからulです！

于 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 に答える