50

高さが固定の div タグがあります。ほとんどの画像の高さと幅は同じです。

画像がうまく配置されるように、div の下部にある画像を揃えたいと思います。これが私がこれまでに持っているものです：

<div id="randomContainer">
    <div id="imageContainer">
        <img src="1.png" alt=""/>
        <img src="2.png" alt=""/>
        <img src="3.png" alt=""/>
        <img src="4.png" alt=""/>
    </div>
    <div id="navigationContainer">
        <!-- navigation stuff -->
    </div>
</div>

CSS は次のようになります。

div#imageContainer {
    height: 160px;  
    vertical-align: bottom;
    display: table-cell;
}

下部の画像display: table-cellとvertical-align: bottomcss 属性を揃えることができました。

div を table-cell として表示し、画像を DIV タグの下部に配置するよりクリーンな方法はありますか?

4

4 に答える 4

64

親divを次のように設定しposition:relative、内部要素を次のように設定しますposition:absolute; bottom:0

于 2012-08-30T16:48:31.557 に答える
50

This is your code: http://jsfiddle.net/WSFnX/

Using display: table-cell is fine, provided that you're aware that it won't work in IE6/7. Other than that, it's safe: Is there a disadvantage of using `display:table-cell`on divs?

To fix the space at the bottom, add vertical-align: bottom to the actual imgs:

http://jsfiddle.net/WSFnX/1/

Removing the space between the images boils down to this: bikeshedding CSS3 property alternative?

So, here's a demo with the whitespace removed in your HTML: http://jsfiddle.net/WSFnX/4/

于 2011-06-29T13:00:59.230 に答える
21

フレックスボックスはalign-items: flex-end;withdisplay: flex;またはを使用してこれを実現できますdisplay: inline-flex;

div#imageContainer {
    height: 160px;  
    align-items: flex-end;
    display: flex;

    /* This is the default value, so you only need to explicitly set it if it's already being set to something else elsewhere. */
    /*flex-direction: row;*/
}

JSFiddle の例

CSS-Tricks には、フレックスボックスの優れたガイドがあります

于 2016-05-04T23:33:04.323 に答える