Bagaimana cara mendapatkan kedua div ini secara berdampingan?

110

Saya memiliki dua div yang tidak bersarang, satu di bawah yang lain. Keduanya berada dalam satu div induk, dan div induk ini berulang. Jadi intinya:

<div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

Saya ingin mendapatkan setiap pasangan child_div_1dan child_div_2bersebelahan. Bagaimana saya bisa melakukan ini?

css layout html Justin Meltzer
sumber

Jawaban:

82 
#parent_div_1, #parent_div_2, #parent_div_3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-right: 10px;
  float: left;
}
.child_div_1 {
  float: left;
  margin-right: 5px;
}

Periksa contoh yang berfungsi di http://jsfiddle.net/c6242/1/

Hussein
sumber
1
Dia ingin div anak-anak sejajar satu sama lain, bukan orang tua (setidaknya itulah pemahaman saya ...)
ehdv
4
Saya masih berpikir display: table-cellakan mendapatkan hasil yang mendekati apa yang dia maksud (karena mereka akan memiliki tinggi yang sama dan sebagainya) tetapi cara ini pasti akan berhasil.
ehdv
@ehdv display: table-celltidak didukung di IE6 IE7. float: kiri; adalah cara yang tepat untuk melakukan ini.
Hussein
Sebenarnya cara yang tepat untuk melakukan ini di IE6,7 adalah dengan <tr><td>, karena opsi lain apa pun akan rusak saat pengguna mengubah ukuran jendela. Di browser modern, display: inline-blockbiasanya merupakan pilihan terbaik.
John Henckel
126

Karena div secara default adalah blockelemen - artinya div akan menempati lebar penuh yang tersedia, coba gunakan -

display:inline-block;

The divkini diberikan inline yaitu tidak mengganggu mengalir dari elemen, tetapi masih akan diperlakukan sebagai elemen blok.

Saya menemukan teknik ini lebih mudah daripada bergulat dengan floats.

Lihat tutorial ini untuk lebih lanjut - http://learnlayout.com/inline-block.html . Saya akan merekomendasikan bahkan artikel sebelumnya yang mengarah ke yang satu itu. (Tidak, saya tidak menulisnya)

Robin Maben
sumber
Saya sangat menyukai solusi ini. Satu-satunya masalah saya dengan itu adalah yang menyelaraskan bagian bawah kedua div alih-alih menyelaraskan bagian atas. Apakah ada pengaturan cepat untuk ini juga?
Chris
Saya akan menyarankan menggunakan 2 pembungkus divyang memiliki tinggi yang sama sehingga konten di dalamnya akan tampak sejajar atas.
Robin Maben
2
Saya setuju. Ini jauh lebih baik daripada float:leftkarena ini memberi Anda lebih banyak opsi tanpa mendefinisikan ulang seluruh tata letak Anda. Hal-hal "berjalan begitu saja" seperti ini. Lihat di sini: jsfiddle.net/SrAQd/4
Jerry
12
Untuk mendapatkan perataan vertikal saya akan menambahkan "vertical-align: top;"
cdiggins
@ Chris: Ya, saya setuju dengan cdiggins. Itu akan membantu Anda.
Robin Maben
44

Saya menemukan kode di bawah ini sangat berguna, mungkin membantu siapa saja yang datang mencari di sini

<html>
<body>
    <div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
    <div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
    <div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>
Luaskan cuplikan

kapak
sumber
11

Menggunakan flexbox sangat sederhana!

#parent_div_1, #parent_div_2, #parent_div_3 {
    display: flex;
}

Contoh biola

Sol
sumber
6

Menggunakan gaya

.child_div_1 {
    float:left
}
amit_g
sumber
5

Terbaik yang berhasil untuk saya:

 .left{
   width:140px;
   float:left;
   height:100%;
 }

 .right{
   margin-left:140px;
 }


http://jsfiddle.net/jiantongc/7uVNN/

jiantongc.dll
sumber
2

Menggunakan flexbox

   #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }
dasfdsa
sumber