DIVを下またはベースラインに揃える

94

子divタグを親divタグの下部またはベースラインに揃えようとしています。

私がやりたいのは、子Divを親Divのベースラインに置くことだけです。これは、次のようになります。

HTML

<div id="parentDiv">
<div class="childDiv"></div>
</div>

CSS

#parentDiv
{
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}
#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
}

注意

childDiv高さの異なる複数のを使用します。ベースライン/ボトムに合わせるには、それらすべてが必要です。

html css

— sia
ソース

考えさえしなかった！parentDivの高さを削除すると、すべてのchildDivがベースラインに配置されます。私は愚かなサリーです！

— sia

ただし、特定の高さにしたい場合はabsolute、親に応じた配置を使用する必要があります。

— Y.ショーハム、2010年

154

これを追加する必要があります：

#parentDiv {
  position: relative;
}

#parentDiv .childDiv {
  position: absolute;
  bottom: 0;
  left: 0;
}

absolute要素を宣言するとき、それはそうではない最も近い親static（それはabsolute、relativeまたはでなければなりません）に従って配置されfixedます。

— Y.ショーハム
ソース

7

私はこれが彼の望んでいることを疑っています、現在これはすべてを動的な棒グラフの場合は複数の子要素があるように見えます）を互いの上に配置します。

— crmepham 2013

50

7年後、垂直方向の配置を検索してもこの問題が浮かび上がるので、現在利用できる別のソリューションであるフレックスボックスの配置を投稿します。display:flex; justify-content: flex-end; flex-direction: column親divに設定するだけです（このフィドルでも示されています）。

#parentDiv
{
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}

— gcbenison
ソース

1

シンプル。まさに私が欲しかったもの。align-items: flex-start;アイテムを引き伸ばしたくない場合に使用します。

— Madhan

これが最近の最良の答えです！

— Rens Groenveld

12

テーブルとテーブルセルのCSS表示値を使用します。

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,body {
    width: 100%;
    height: 100%;
}
.valign {
    display: table;
    width: 100%;
    height: 100%;
}
.valign > div {
    display: table-cell;
    width: 100%;
    height: 100%;
}
.valign.bottom > div {
    vertical-align: bottom;
}

ここにJSBinデモを作成しました：http ://jsbin.com/INOnAkuF/2/edit

デモには、同じ手法を使用して垂直方向に中央揃えにする方法の例も含まれています。

— ロミエム
ソース

1

テーブルと同じぐらい多くの場合、時々これが最良の解決策です

— Sean256

これは私にとって最良の解決策でした

— ボウラエ2017

絶対位置のエレメントを使用すると、一般的に、親要素の高さを変更するので、これは本当に、最適なソリューションです

— hamncheez

7

これは機能します（私はIEとFFのみをテストしました）：

<html>
<head>
    <style type="text/css">
        #parent {
            height: 300px;
            width: 300px;
            background-color: #ccc;
            border: 1px solid red;
            position: relative;
        }
        #child  {
            height: 100px;
            width: 30px;
            background-color: #eee;
            border: 1px solid green;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="parent">parent
        <div id="child">child</div>
    </div>
    outside
</body>
</html>

お役に立てば幸いです。

— スタントン
ソース

5

Y. Shohamが投稿した答え（絶対配置を使用）は、コンテナーが高さを固定しているほとんどの場合に最も簡単な解決策のようですが、親DIVに複数のDIVを含め、動的コンテンツに基づいて高さを自動調整する必要がある場合は、問題がある可能性があります。動的コンテンツの2つのブロックが必要でした。1つはコンテナーの上部に配置され、もう1つは下部に配置されます。コンテナーを上部のDIVのサイズに調整できますが、下部に配置されたDIVの方が高かった場合、コンテナーのサイズは変更されず、外側に拡張されます。。テーブルスタイルの配置を使用してromiemが上記で概説した方法は、少し複雑ですが、この点でより堅牢であり、コンテナーの下部と正しい自動高さに位置合わせできます。

CSS

#container {
        display: table;
        height: auto;
}

#top {
    display: table-cell;
    width:50%;
    height: 100%;
}

#bottom {
    display: table-cell;
    width:50%;
    vertical-align: bottom;
    height: 100%;
}

HTML

<div id=“container”>
    <div id=“top”>Dynamic content aligned to top of #container</div>
    <div id=“bottom”>Dynamic content aligned to botttom of #container</div>
</div>

私はこれが新しい答えではないことに気づきましたが、私の解決策を見つけるためにこのアプローチにコメントしたかったのですが、初心者としてコメントすることは許可されず、投稿のみができました。

— ニック・ジラード
ソース

3

おそらく、子divをに設定する必要がありposition: absoluteます。

子供のスタイルを

#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
  position:absolute;
  top:207px;
}

— ラビア
ソース

私はそれを試しましたが、私が必要なのは、childDivの下部がparentDivの下部にあることです。グラフは動的であり、高さは各childDivによって異なります...配置は機能するかもしれませんが、私は持っていませんquitは堅実なものを見つけました...

— sia

5

topを207（任意の数）に設定することはお勧めできません

— 。bottom

2

古い投稿ですが、探している人のために答えを共有したいと思っていました。そして、あなたが使用するとabsolute物事がうまくいかない可能性があるので。私がすることは

HTML

<div id="parentDiv"></div>
<div class="childDiv"></div>

Css

parentDiv{

}
childDiv{
    height:40px;
    margin-top:-20px;
}

そして、それはその下のdivを親divに戻すだけです。ほとんどのブラウザでも安全

これにより、childDivがparentDivの下部に半分になります。マージントップでは少なくとも-40pxを使用する必要があります。また、position：relativeを使用することもベストプラクティスです。この場合、両方のdivに対して。

— Augus

1

私は似たようなものを持っていて、パディングトップを子供に効果的に追加することでそれを機能させました。

ここでの他のいくつかの答えが解決策になると確信していますが、長い時間をかけて簡単に機能させることができませんでした。代わりに、そのシンプルさでエレガントなパディングトップソリューションを使用しましたが、私には一種のハックのように見えます（設定されるピクセル値はおそらく親の高さに依存することは言うまでもありません）。

— チェレポ
ソース

0

td {
  height: 150px;
  width: 150px;
  text-align: center;
}

b {
  border: 1px solid black;
}

.child-2 {
  vertical-align: bottom;
}

.child-3 {
  vertical-align: top;
}

<table border=1>
  <tr>
    <td class="child-1">
      <b>child 1</b>
    </td>
    <td class="child-2">
     <b>child 2</b>
    </td>
    <td class="child-3">
      <b>child 3</b>
    </td>
  </tr>
</table>

スニペットを展開

これは私の解決策です

— NEM
ソース

-6

親Div内に複数の子Divがある場合は、以下のようなvertical-alignプロパティを使用できます。

.Parent div
{
  vertical-align : bottom;
}

— パワン
ソース

コメントなしでなぜこれほど多くの反対票を投じるのですか？それは問題を解決しませんか？オンラインでの調査は、そうすべきだと示唆しています。

— sholsapp 2014