web-dev-qa-db-ja.com

DIVコンテナ内のHTML画像の下部の配置

高さが固定された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: bottom css属性。

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

htmlcssimagealignmentspacing
38
Patric

これはあなたのコードです： http://jsfiddle.net/WSFnX/

display: table-cellを使用しても問題ありませんが、IE6/7では機能しないことがわかっている場合に限ります。それ以外は安全です： divで `display：table-cell`を使用することには不利な点はありますか？

下部のスペースを修正するには、vertical-align: bottomを実際のimgsに追加します。

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

画像間のスペースを削除すると、これに要約されます： bikeshedding CSS3 property alternative？

したがって、HTMLで空白を削除したデモを次に示します。 http://jsfiddle.net/WSFnX/4/

46
thirtydot

親divをposition:relativeとして設定し、内部要素をposition:absolute; bottom:0に設定します

55
sekmo

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

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

CSS-Tricksにはフレックスボックスの良いガイドがあります

12
Daniel

<div>いくつかの割合で

div {
  position: relative;
  width: 100%;
  height: 100%;
}

<img>独自の比率で

img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: auto; /* to keep proportions */
  height: auto; /* to keep proportions */
  max-width: 100%; /* not to stand out from div */
  max-height: 100%; /* not to stand out from div */
  margin: auto auto 0; /* position to bottom and center */
}
6
comonitos