Bagaimana cara menempatkan dua div di samping satu sama lain?

370

Pertimbangkan kode berikut :

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}
<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>
Luaskan cuplikan

Saya ingin dua div berada di sebelah satu sama lain di dalam wrapper div. Dalam hal ini, ketinggian div hijau harus menentukan ketinggian bungkusnya.

Bagaimana saya bisa mencapai ini melalui CSS?

css html Misha Moroshko
sumber
5
Juga: stackoverflow.com/questions/446060/…
radek
14
#wrapper { display: flex; }
icl7126
Kemungkinan duplikat dari CSS dua div di sebelah satu sama lain
Alexander

Jawaban:

447

Apung satu atau kedua div bagian dalam.

Mengambang satu div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

atau jika Anda mengapung keduanya, Anda harus mendorong pembungkusnya untuk memuat anak-anak yang melayang, atau itu akan berpikir itu kosong dan tidak menempatkan perbatasan di sekitar mereka

Mengambang kedua div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}
clairesuzy
sumber
2
Anda bisa mengatur overflow:auto#wrapper Jadi ukurannya masih akan menyesuaikan dengan ukuran konten. (Tanpa perlu jelas: kedua elemen)
meo
ya dalam contoh satu, jika #pertama lebih panjang, Anda tentu bisa - mengandung floats 101 eh;) .. meluap disembunyikan di #second menghindari kebutuhan untuk menghitung margin kiri meskipun sebaliknya solusi pada dasarnya sama
clairesuzy
3
Persis! Saya tidak ingin menghitung margin. overflow: hiddenmelakukan pekerjaan dengan baik di sini! Namun, itu masih agak ajaib bagiku. Saya pikir itu overflow: hiddenharus menyembunyikan konten jika tidak sesuai dengan wadahnya. Tapi, di sini perilakunya sedikit berbeda. Bisakah Anda menjelaskannya?
Misha Moroshko
4
yang overflowproperti akan menghapus mengapung baik vertikal dan horizontal yang mengapa dalam contoh pertama saya, #secondtidak perlu margin kiri, properti overflow bekerja selama nilai itu tidak visible.. saya lebih suka tersembunyi untuk auto bagi mereka yang baru dalam skenario kasus sehingga bilah gulir tidak dihasilkan secara tidak sengaja (yang otomatis akan dilakukan) .. bagaimanapun juga tidak akan ada konten yang tersembunyi skenario seperti ini karena hanya akan disembunyikan jika melampaui lebar 500px Anda tetapi selama tidak ada konten ketinggian akan bungkus dalam lebar seperti biasa .. tidak bersembunyi;)
clairesuzy
1
overflow: disembunyikan di #wrapper berfungsi untuk berisi # float pertama secara vertikal jika itu menjadi lebih lama daripada div #second non-floated. overflow kedua di #second berfungsi untuk memuat konten di sebelah float pertama, secara horizontal jika tidak maka akan berada di bawah float pertama. Perilaku diperluas dari properti overflow secara bertahap di suatu tempat di CSS2.1, spesifikasi itu sendiri berubah sebagai tanggapan terhadap cara untuk mengandung float tanpa elemen kliring atau peretasan clearfix, istilah teknisnya adalah bahwa ketika digunakan seperti ini ia menciptakan baru blok konteks pemformatan
clairesuzy
130

Memiliki dua divs,

<div id="div1">The two divs are</div>
<div id="div2">next to each other.</div>

Anda juga bisa menggunakan displayproperti:

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

Contoh jsFiddle di sini .

Jika div1melebihi ketinggian tertentu, div2akan diletakkan di sebelah sebelah div1bawah. Untuk mengatasi ini, gunakan vertical-align:top;pada div2.

Contoh jsFiddle di sini .

jim_kastrin
sumber
@Bahkan jawaban yang diterima menggunakan properti float, yang didukung lebih awal dari properti tampilan oleh browser utama. Chrome mendukung float dari v1.0 dan tampilan dari v4.0. Mungkin jawaban yang diterima lebih kompatibel-mundur pada saat itu ditulis.
jim_kastrin
5
Solusi ini memiliki satu masalah yang menjengkelkan: karena divdibuat inlineAnda tidak perlu menyimpan spasi, baris baru dll di antara mereka dalam HTML Anda. Jika tidak, browser akan membuat spasi di antara mereka. Lihat Fiddle ini : Anda tidak dapat mengatur agar keduanya tetap berada divdi baris yang sama kecuali jika Anda menempatkan tag mereka tanpa di antaranya.
Alexander Abakumov
30

Anda bisa duduk elemen bersebelahan dengan menggunakan properti float CSS:

#first {
float: left;
}
#second {
float: left;
}

Anda harus memastikan bahwa pembungkus div memungkinkan untuk mengapung dalam hal lebar, dan margin dll diatur dengan benar.

James
sumber
17

Coba gunakan model flexbox. Mudah dan singkat untuk menulis.

Jsfiddle hidup

CSS:

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

arah default adalah baris. Jadi, ia sejajar satu sama lain di dalam #wrapper. Tetapi tidak didukung IE9 atau kurang dari versi itu

Md. Rafee
sumber
1
Saya tidak percaya betapa mudahnya menggunakannya flex. Terima kasih!
Sam
16

ini solusinya:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: auto; /* so the size of the wrapper is alway the size of the longest content */
}
#first {
    float: left;
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    margin: 0 0 0 302px; /* considering the border you need to use a margin so the content does not float under the first div*/
}

demo Anda diperbarui;

http://jsfiddle.net/dqC8t/1/

meo
sumber
Terima kasih. Jika saya menghilangkannya overflow: auto;masih berfungsi. Bisakah Anda memberi contoh di mana itu diperlukan?
Misha Moroshko
ya tentu: hapus overflow otomatis dan buat konten pertama lebih lama dari konten kedua, Anda juga melihat bahwa ukuran wadah hanya beradaptasi, ketika Anda mengatur overflow otomatis di atasnya, atau jika Anda menggunakan elemen kliring: jsfiddle. net / dqC8t / 3
meo
Baiklah, terima kasih! Namun, saya tidak suka margin: 0 0 0 302px;karena itu tergantung pada width: 300px;. Tapi Terimakasih!!
Misha Moroshko
Anda tidak membutuhkannya jika Anda menentukan lebar i untuk div kedua Anda
meo
15

Pilihan 1

Gunakan float:leftpada kedua divelemen dan atur% lebar untuk kedua elemen div dengan lebar total gabungan 100%.

Gunakan box-sizing: border-box;pada elemen div mengambang. Kotak batas nilai memaksa padding dan berbatasan dengan lebar dan tinggi alih-alih memperluasnya.

Gunakan clearfix pada <div id="wrapper">untuk menghapus elemen anak mengambang yang akan membuat skala div pembungkus ke ketinggian yang benar.

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

http://jsfiddle.net/dqC8t/3381/

pilihan 2

Gunakan position:absolutepada satu elemen dan lebar tetap pada elemen lainnya.

Tambahkan posisi: relatif ke <div id="wrapper">elemen untuk membuat elemen anak benar-benar posisi ke <div id="wrapper">elemen.

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}
#first {
    border: 1px solid red;
    width:100px;
}
#second {
    border: 1px solid green;
    position:absolute;
    top:0;
    left:100px;
    right:0;
}

http://jsfiddle.net/dqC8t/3382/

Opsi 3

Gunakan display:inline-blockpada kedua divelemen dan atur% lebar untuk kedua elemen div dengan lebar total gabungan 100%.

Dan lagi (sama seperti float:leftcontoh) digunakan box-sizing: border-box;pada elemen div. Kotak batas nilai memaksa padding dan berbatasan dengan lebar dan tinggi alih-alih memperluasnya.

CATATAN: elemen inline-blok dapat memiliki masalah spasi karena dipengaruhi oleh spasi di markup HTML. Informasi lebih lanjut di sini: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}

#first {
    width:50%;
    border: 1px solid red;
    display:inline-block;
}

#second {
    width:50%;
    border: 1px solid green;
    display:inline-block;
}

http://jsfiddle.net/dqC8t/3383/

Opsi terakhir adalah menggunakan opsi tampilan baru bernama flex, tetapi perhatikan bahwa kompatibilitas browser mungkin bisa dimainkan:

http://caniuse.com/#feat=flexbox

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Jako Basson
sumber
1
Sepakat; floatjangan mengapungkan kapalku. inline-blockbatu. (Maaf.)
SteveCinq
7

Cobalah untuk menggunakan perubahan kode di bawah ini untuk menempatkan dua div di depan satu sama lain 

#wrapper {
  width: 500px;
  border: 1px solid black;
  display:flex;
}

Tautan JSFiddle

Shailesh
sumber
7

Sangat mudah - Anda bisa melakukannya dengan cara yang sulit

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}
<div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>
Luaskan cuplikan

atau cara mudah 

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}
<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>
Luaskan cuplikan

Ada juga jutaan cara lain.
Tapi saya hanya dengan cara mudah. Saya juga ingin memberi tahu Anda bahwa banyak jawaban di sini salah Tapi kedua cara yang saya tunjukkan setidaknya berfungsi dalam HTML 5.

Runningman Studios
sumber
5

Ini adalah jawaban CSS3 yang tepat. Semoga ini membantu Anda entah bagaimana sekarang: D Saya benar-benar merekomendasikan Anda untuk membaca buku: https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 Sebenarnya saya telah membuat solusi ini dengan membaca buku ini sekarang . : D

#wrapper{
  display: flex;
  flex-direction: row;
  border: 1px solid black;
}
#first{
  width: 300px;
  border: 1px solid red;
}
#second{
  border: 1px solid green;
}
<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>
Luaskan cuplikan

Martin Krajčírovič
sumber
3

  1. Tambahkan float:left;properti di kedua div.

  2. Tambahkan display:inline-block;properti.

  3. Tambahkan display:flex;properti di div induk.

Teman
sumber
2

Pendekatan saya:

<div class="left">Left</div>
<div class="right">Right</div>

CSS:

.left {
    float: left;
    width: calc(100% - 200px);
    background: green;
}

.right {
    float: right;
    width: 200px;
    background: yellow;
}
sNICkerssss
sumber
0 

#wrapper {
width: 1200;
border: 1px solid black;
position: relative;
float: left;
}
#first {
width: 300px;
border: 1px solid red;
position: relative;
float: left;
}
#second {
border: 1px solid green;
position: relative;
float: left;
width: 500px;
}
<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>
Luaskan cuplikan

Akshit Ahuja
sumber
0

Di UI materi dan react.js Anda bisa menggunakan kisi

<Grid
  container
  direction="row"
  justify="center"
  alignItems="center"
>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>

</Grid>
Pedro JR
sumber