Sejajarkan DIV ke bawah atau baseline

97

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.

html css sia
sumber
bahkan tidak berpikir! saya baru saja menghapus ketinggian di parentDiv dan semua childDiv sekarang duduk di basline. Aku hanya orang yang konyol!
sia
Tetapi jika Anda ingin memiliki ketinggian tertentu - Anda harus menggunakan absolutepemosisian sesuai dengan induknya.
Y. Shoham

Jawaban:

159

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).

Y. Shoham
sumber
7
Saya ragu ini melakukan apa yang dia inginkan, saat ini ini akan memposisikan semua (terlihat seolah-olah akan ada beberapa elemen anak jika itu adalah diagram batang dinamis) di atas satu sama lain.
crmepham
54

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
}
gcbenison.dll
sumber
1
Sederhana. Persis seperti yang saya inginkan. Gunakan align-items: flex-start;jika Anda tidak ingin strech item.
Madhan
Ini adalah jawaban terbaik hari ini!
Rens Groenveld
justify-content: flex-end menghilang scroll bar saya
kta
12

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.

romiem
sumber
1
Untuk omong kosong sebanyak tabel, terkadang ini adalah solusi terbaik
Sean256
ini adalah solusi terbaik untuk saya
bowlerae
Ini benar-benar solusi terbaik, karena menggunakan elemen yang diposisikan mutlak biasanya mengubah tinggi elemen induk
hamncheez
7

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.

pstanton
sumber
5

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>

Contoh

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.

Nick Gillard
sumber
3

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;
}
Ravia
sumber
saya mencobanya, tetapi yang saya butuhkan adalah bagian bawah childDiv untuk duduk di bagian bawah parentDiv, grafiknya harus dinamis, dan ketinggiannya akan bervariasi dari setiap childDiv ke yang berikutnya ... pemosisian mungkin berfungsi tetapi saya belum berhenti menemukan sesuatu yang solid ...
sia
5
bukan ide yang baik untuk mengatur ke atas 207 (beberapa angka acak) lebih baik untuk mengatur bawah: 0
pstanton
2

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


sumber
Ini akan membuat setengah childDiv di bagian bawah parentDiv. Anda perlu setidaknya menggunakan -40px pada margin-top. Juga merupakan praktik terbaik untuk menggunakan posisi: relatif; dalam kasus ini untuk kedua div.
Augus
1

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).

cellepo
sumber
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>
Luaskan cuplikan

Ini solusi saya

NEM
sumber
-6

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;
}
Pawan
sumber
Mengapa begitu banyak yang tidak memberikan suara untuk ini tanpa komentar? Apakah itu tidak menyelesaikan masalah? Penelitian online menyarankan itu harus.
sholsapp