Tách Div thành 2 cột bằng CSS

Tôi đã cố gắng chia một div thành hai cột bằng CSS, nhưng tôi vẫn chưa thể làm cho nó hoạt động được. Cấu trúc cơ bản của tôi như sau:

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

Nếu tôi cố gắng làm nổi các div bên phải và bên trái vào các vị trí tương ứng của chúng (bên phải và bên trái), nó dường như bỏ qua màu nền của div nội dung. Và các mã khác mà tôi đã thử từ các trang web khác nhau dường như không thể dịch sang cấu trúc của tôi.

Cảm ơn vì bất kì sự giúp đỡ!

Khi bạn thả nổi hai div đó, nội dung div sẽ giảm xuống chiều cao bằng không. Chỉ cần thêm

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

sau div #right nhưng bên trong div nội dung. Điều đó sẽ buộc div nội dung bao quanh hai div bên trong, nổi.

Điều này làm việc tốt cho tôi. Tôi đã chia màn hình thành hai nửa: 20% và 80%:

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

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

Một cách khác để làm điều này là thêm overflow:hidden;vào phần tử cha của các phần tử float.

tràn: ẩn sẽ làm cho phần tử phát triển để phù hợp với các phần tử nổi.

Bằng cách này, tất cả có thể được thực hiện trong css thay vì thêm một phần tử html khác.

Cách linh hoạt nhất để làm điều này:

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

Điều này hoạt động hoàn toàn giống như thêm phần tử vào #content:

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

nhưng không thực sự thêm một phần tử. :: after được gọi là phần tử giả. Lý do duy nhất khiến điều này tốt hơn so với việc thêm overflow:hidden;vào #content là bạn có thể tràn phần tử con được định vị tuyệt đối và vẫn hiển thị. Ngoài ra, nó sẽ cho phép vẫn nhìn thấy bóng hộp.

Không có câu trả lời nào trả lời câu hỏi ban đầu.

Câu hỏi đặt ra là làm thế nào để tách một div thành 2 cột bằng css.

Tất cả các câu trả lời trên thực sự nhúng 2 div vào một div duy nhất để mô phỏng 2 cột. Đây là một ý tưởng tồi vì bạn sẽ không thể chuyển nội dung vào 2 cột theo bất kỳ kiểu động nào.

Vì vậy, thay vì ở trên, hãy sử dụng một div duy nhất được xác định để chứa 2 cột bằng cách sử dụng CSS như sau ...

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

gán ở trên dưới dạng một lớp cho một div và nó sẽ thực sự chuyển nội dung của nó vào 2 cột. Bạn cũng có thể đi xa hơn và xác định khoảng cách giữa các lề. Tùy thuộc vào nội dung của div, bạn có thể cần phải xáo trộn các giá trị ngắt từ để nội dung của bạn không bị cắt giữa các cột.

Vì bất cứ lý do gì mà tôi chưa bao giờ thích các cách tiếp cận xóa, tôi dựa vào số nổi và độ rộng phần trăm cho những thứ như thế này.

Đây là một cái gì đó hoạt động trong các trường hợp đơn giản:

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

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

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

Nếu bạn đưa một số nội dung vào, bạn sẽ thấy rằng nó hoạt động:

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

Bạn có thể xem tại đây: http://cssdesk.com/d64uy

Đặt trẻ em chia đôi inline-blockvà chúng sẽ xếp cạnh nhau:

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

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

Xem Demo

Tôi biết bài viết này đã cũ, nhưng nếu có bạn vẫn đang tìm kiếm một giải pháp đơn giản hơn.

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

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

Cách tốt nhất để chia một div theo chiều dọc -

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

Bạn có thể sử dụng flexbox để kiểm soát bố cục của phần tử div của mình:

* { 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>

Phao nổi không ảnh hưởng đến dòng chảy. Những gì tôi có xu hướng làm là thêm một

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

ở cuối 'wrap div' (trong trường hợp này là nội dung). Tôi có thể biện minh cho điều này trên cơ sở ngữ nghĩa bằng cách nói rằng có thể cần một đoạn văn như vậy. Một cách tiếp cận khác là sử dụng CSS clearfix:

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

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

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

Thủ thuật với các nhận xét là để tương thích trên nhiều trình duyệt.

Câu này được trả lời tốt nhất ở đây Câu hỏi 211383

Ngày nay, bất kỳ người tự trọng nào cũng nên sử dụng phương pháp "micro-clearfix" đã nêu để xóa phao nổi.

1. Đặt kích thước phông chữ bằng 0 trong DIV chính.

2. Đặt% chiều rộng cho từng DIV con.

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

* Trong Safari, bạn có thể cần đặt 49% để nó hoạt động.

Chia một bộ phận thành hai cột rất dễ dàng, chỉ cần chỉ định chiều rộng của cột của bạn tốt hơn nếu bạn đặt điều này (như chiều rộng: 50%) và đặt float: left cho cột bên trái và float: right cho cột bên phải.