Bagi Div Menjadi 2 Kolom Menggunakan CSS

Saya telah mencoba untuk membagi div menjadi dua kolom menggunakan CSS, tetapi saya belum berhasil membuatnya berfungsi. Struktur dasar saya adalah sebagai berikut:

<div id="content">
  <div id="left">
     <div id="object1"></div>
     <div id="object2"></div>
  </div>

  <div id="right">
     <div id="object3"></div>
     <div id="object4"></div>
  </div>
</div>

Jika saya mencoba untuk mengapungkan div kanan dan kiri ke posisi masing-masing (kanan dan kiri), tampaknya mengabaikan warna latar div konten. Dan kode lain yang saya coba dari berbagai situs web sepertinya tidak dapat diterjemahkan ke dalam struktur saya.

Terima kasih atas bantuannya!

Saat Anda mengapung kedua div tersebut, div konten menciut ke ketinggian nol. Tambahkan saja

<br style="clear:both;"/>

setelah div #right tetapi di dalam div konten. Itu akan memaksa div konten untuk mengelilingi dua div internal yang mengambang.

Ini bekerja dengan baik untuk saya. Saya telah membagi layar menjadi dua bagian: 20% dan 80%:

<div style="width: 20%; float:left">
   #left content in here
</div>

<div style="width: 80%; float:right">
   #right content in there
</div>

Cara lain untuk melakukannya adalah dengan menambahkan overflow:hidden;elemen induk dari elemen mengambang.

overflow: hidden akan membuat elemen bertambah sesuai dengan elemen float.

Dengan cara ini, semuanya bisa dilakukan dalam css daripada menambahkan elemen html lainnya.

Cara paling fleksibel untuk melakukan ini:

#content::after {
  display:block;
  content:"";
  clear:both;
}

Ini berfungsi persis sama dengan menambahkan elemen ke #content:

<br style="clear:both;"/>

tetapi tanpa benar-benar menambahkan elemen. :: after disebut elemen pseudo. Satu-satunya alasan hal ini lebih baik daripada menambahkan overflow:hidden;ke #content adalah karena Anda dapat menempatkan elemen turunan yang diposisikan secara absolut dan masih terlihat. Juga akan memungkinkan box-shadow untuk tetap terlihat.

Tak satu pun dari jawaban yang diberikan menjawab pertanyaan asli.

Pertanyaannya adalah bagaimana memisahkan div menjadi 2 kolom menggunakan css.

Semua jawaban di atas sebenarnya menyematkan 2 div ke dalam satu div untuk mensimulasikan 2 kolom. Ini adalah ide yang buruk karena Anda tidak akan dapat mengalirkan konten ke 2 kolom secara dinamis.

Jadi, alih-alih di atas, gunakan satu div yang didefinisikan berisi 2 kolom menggunakan CSS sebagai berikut ...

.two-column-div {
 column-count: 2;
}

menetapkan di atas sebagai kelas ke div, dan itu sebenarnya akan mengalirkan isinya ke dalam 2 kolom. Anda dapat melangkah lebih jauh dan menentukan celah antar margin juga. Bergantung pada konten div, Anda mungkin perlu mengacaukan nilai jeda kata sehingga konten Anda tidak terpotong di antara kolom.

Untuk alasan apa pun saya tidak pernah menyukai pendekatan pembersihan, saya mengandalkan pelampung dan persentase lebar untuk hal-hal seperti ini.

Inilah sesuatu yang berfungsi dalam kasus sederhana:

#content { 
  overflow:auto; 
  width: 600px; 
  background: gray; 
} 

#left, #right { 
  width: 40%; 
  margin:5px; 
  padding: 1em; 
  background: white; 
} 

#left  { float:left;  }
#right { float:right; } 

Jika Anda memasukkan beberapa konten, Anda akan melihat bahwa itu berfungsi:

<div id="content">
  <div id="left">
     <div id="object1">some stuff</div>
     <div id="object2">some more stuff</div>
  </div>

  <div id="right">
     <div id="object3">unas cosas</div>
     <div id="object4">mas cosas para ti</div>
  </div>
</div>

Anda dapat melihatnya di sini: http://cssdesk.com/d64uy

Buat div turunan inline-blockdan posisinya akan berdampingan:

#content {
   width: 500px;
   height: 500px;
}

#left, #right {
    display: inline-block;
    width: 45%;
    height: 100%;
}

Lihat Demo

Saya tahu posting ini sudah tua, tetapi jika ada di antara Anda masih mencari solusi yang lebih sederhana.

#container .left,
#container .right {
    display: inline-block;
}

#container .left {
    width: 20%;
    float: left;
}
#container .right {
    width: 80%;
    float: right;
}

Cara terbaik untuk membagi div secara vertikal -

#parent {
    margin: 0;
    width: 100%;
}
.left {
    float: left;
    width: 60%;
}
.right {
    overflow: hidden;
    width: 40%;
}

Anda dapat menggunakan flexbox untuk mengontrol tata letak elemen div Anda:

* { box-sizing: border-box; }

#content {
  background-color: rgba(210, 210, 210, 0.5);
  border: 1px solid #000;
  padding: 0.5rem;
  display: flex;
}

#left,
#right {
  background-color: rgba(10, 10, 10, 0.5);
  border: 1px solid #fff;
  padding: 0.5rem;
  flex-grow: 1;
  color: #fff;
}

<div id="content">
  <div id="left">
     <div id="object1">lorem ipsum</div>
     <div id="object2">dolor site amet</div>
  </div>

  <div id="right">
     <div id="object3">lorem ipsum</div>
     <div id="object4">dolor site amet</div>
  </div>
</div>

Float tidak mempengaruhi aliran. Yang cenderung saya lakukan adalah menambahkan file

<p class="extro" style="clear: both">possibly some content</p>

di akhir 'div pembungkus' (dalam hal ini konten). Saya bisa membenarkan hal ini secara semantik dengan mengatakan bahwa paragraf seperti itu mungkin diperlukan. Pendekatan lain adalah dengan menggunakan CSS clearfix:

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

#content {
  display: inline-block;
}
/*  \*/
* html #content {
  height: 1%;
}

#content {
  display: block;
}
/*  */

Tipuan dengan komentar adalah untuk kompatibilitas lintas browser.

Ini paling baik dijawab di sini Pertanyaan 211383

Saat ini, setiap orang yang menghargai diri sendiri harus menggunakan pendekatan "micro-clearfix" untuk membersihkan pelampung.

1. Buat ukuran font sama dengan nol di DIV induk.

2. Set lebar% untuk setiap DIV anak.

   #content {
       font-size: 0;
   }
   
   #content > div {
       font-size: 16px;
       width: 50%;
   }
   

* Di Safari Anda mungkin perlu mengatur 49% untuk membuatnya berfungsi.

Membagi sebuah divisi menjadi dua kolom sangatlah mudah, cukup tentukan lebar kolom Anda lebih baik jika Anda meletakkan ini (seperti lebar: 50%) dan mengatur float: left untuk kolom kiri dan float: right untuk kolom kanan.