Sejajarkan DIV ke bawah atau baseline

Question 1

Saya mencoba untuk menyelaraskan tag div anak ke bawah atau garis dasar dari tag div induk.

Yang ingin saya lakukan adalah memiliki Div anak sebagai dasar dari Parent Div, berikut tampilannya sekarang:

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;
}

Catatan

Saya akan memiliki beberapa childDivs dengan ketinggian yang berbeda-beda, dan saya akan membutuhkan semuanya untuk disejajarkan dengan baseline / bottom.

Question 2

Anda perlu menambahkan ini:

#parentDiv {
  position: relative;
}

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

Saat mendeklarasikan absoluteelemen, itu diposisikan sesuai dengan induk terdekatnya yang tidak static(harus absolute, relativeatau fixed).

Question 3

Tujuh tahun kemudian pencarian untuk perataan vertikal masih memunculkan pertanyaan ini, jadi saya akan memposting solusi lain yang kami miliki sekarang: posisi flexbox. Cukup atur display:flex; justify-content: flex-end; flex-direction: columndiv induk (ditunjukkan di biola ini juga):

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

Question 4

Gunakan nilai tampilan CSS dari tabel dan sel tabel:

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;
}

Saya telah membuat demo JSBin di sini: http://jsbin.com/INOnAkuF/2/edit

Demo juga memiliki contoh bagaimana mensejajarkan secara vertikal menggunakan teknik yang sama.

Question 5

ini berfungsi (saya hanya menguji 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>

semoga membantu.

Question 6

Jawaban yang diposting oleh Y. Shoham (menggunakan pemosisian absolut) tampaknya menjadi solusi paling sederhana dalam banyak kasus di mana wadah memiliki ketinggian tetap, tetapi jika DIV induk harus berisi beberapa DIV dan secara otomatis menyesuaikan tingginya berdasarkan konten dinamis, maka mungkin ada masalah. Saya perlu memiliki dua blok konten dinamis; satu sejajar dengan bagian atas wadah dan satu ke bawah dan meskipun saya bisa mendapatkan wadah untuk menyesuaikan dengan ukuran DIV atas, jika DIV sejajar dengan bagian bawah lebih tinggi, itu tidak akan mengubah ukuran wadah tetapi akan meluas ke luar . Metode yang diuraikan di atas oleh romiem menggunakan pemosisian gaya tabel, meskipun sedikit lebih rumit, lebih kuat dalam hal ini dan memungkinkan penyelarasan ke bawah dan ketinggian otomatis yang benar dari wadah.

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>

Saya menyadari ini bukan jawaban baru tetapi saya ingin mengomentari pendekatan ini karena pendekatan ini menuntun saya untuk menemukan solusi saya tetapi sebagai pemula saya tidak diizinkan untuk berkomentar, hanya memposting.

Question 7

Anda mungkin harus menyetel div turunan agar memiliki position: absolute.

Perbarui gaya anak Anda menjadi

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

Question 8

Posting lama tetapi saya pikir saya akan membagikan jawaban untuk siapa pun yang mencari. Dan karena bila Anda menggunakan absolutesesuatu bisa salah. Apa yang akan saya lakukan adalah

HTML

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

Css

parentDiv{

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

Dan itu hanya akan menempatkan div bawah kembali ke div induk. aman untuk sebagian besar browser juga

Question 9

Saya memiliki sesuatu yang serupa dan membuatnya berfungsi dengan secara efektif menambahkan beberapa padding-top ke anak.

Saya yakin beberapa jawaban lain di sini akan sampai pada solusi, tetapi saya tidak bisa membuatnya bekerja dengan mudah setelah banyak waktu; Saya malah berakhir dengan solusi padding-top yang elegan dalam kesederhanaannya, tetapi tampaknya agak hackish bagi saya (belum lagi nilai piksel yang ditetapkannya mungkin akan bergantung pada tinggi induk).

Question 10

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>

Luaskan cuplikan

Ini solusi saya

Question 11

Jika Anda memiliki beberapa Div anak di dalam Div induk Anda, Anda dapat menggunakan properti perataan vertikal seperti di bawah ini:

.Parent div
{
  vertical-align : bottom;
}