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


89

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 đỡ!


2
Có rất nhiều giải pháp, bạn có thể thấy điều này: stackoverflow.com/questions/211383/...
enmaai

Câu trả lời:


60

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.


16
Thật không may rằng điều này đã được ủng hộ rất nhiều lần. Bạn thực sự nên tránh đánh dấu không liên quan, đặc biệt là khi xem xét rằng có những biện pháp hữu hiệu khác được sử dụng rộng rãi.
Jbird

89

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

3
Nếu đây là tất cả những gì bạn làm, phần tử gốc của các phần tử này sẽ không có chiều cao.
tybro0103

Dễ dàng và hiệu quả. Cảm ơn bạn!
Alexis Gamarra

47

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.


1
Tôi cũng khuyến khích độc giả xem câu trả lời khác của tôi. Tôi nghĩ nó thực sự tốt hơn cái này.
tybro0103

1
một lưu ý nữa: overflow:auto;đôi khi có thể là một lựa chọn tốt hơn
tybro0103

Đây chắc chắn là một phương tiện hữu hiệu. Tuy nhiên, điều đáng nói là điều này có thể tạo ra một số thách thức về bố cục rõ ràng. Ví dụ: nếu tôi muốn hiển thị phần tràn của phần tử mẹ của mình.
Jbird

16

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.


Cũng là một giải pháp tuyệt vời, nhưng điều đáng nói ở đây là tính năng này không hoạt động trong IE8. Tôi thực sự đau lòng khi phải là người nói điều đó và tôi xin lỗi vì đã là "gã đó".
Jbird

@Jbird thử #content:after(chỉ một dấu hai chấm thay vì hai) ... Nếu tôi nhớ chính xác, sử dụng hai dấu hai chấm cho các phần tử giả sẽ đúng hơn, nhưng các IE cũ hơn chỉ nhận ra nó nếu nó có một. ... hoặc những thứ tương tự - đã khá lâu kể từ khi tôi giải quyết vấn đề đó.
tybro0103,

10

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.


9

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


8

Đặ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 cũng thích phương pháp này hơn float. Đôi khi cần đặt một: vertical-align: top; (hoặc dưới cùng, v.v.) trên cả phần tử bên trái và bên phải nếu chúng không có cùng kích thước.
james

4

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

3

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%;
}

3

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>


1
Trong số hàng triệu lần thử tương tự, tôi thấy rằng điều này đã hoạt động (cho đến nay) là Tốt nhất. Tất cả những thứ khác tôi đã tìm thấy (và đã thử) đều để nội dung tràn ra ngoài . Cám ơn rất nhiều.
user12379095

1

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.


0

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.


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


Mặc dù đoạn mã này có thể giải quyết câu hỏi, bao gồm một lời giải thích thực sự giúp cải thiện chất lượng bài đăng của bạn. Hãy nhớ rằng bạn đang trả lời câu hỏi cho người đọc trong tương lai và những người đó có thể không biết lý do cho đề xuất mã của bạn.
msrd0

0

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.


Vui lòng thêm một số thông tin với các thẻ có liên quan.
Aman Garg

hy vọng mã này sẽ giúp bạn hiểu điều này theo cách tốt hơn; @AmanGarg CSS: #column { overflow:auto; width: 100%; } #column50pleft, #column50pright{ width: 49%; margin:2px; padding: 0.5%; background: white; } #column50pleft { float:left; } #column50pright { float:right; } HTML: <div id="column"> <div id="column50pleft"> </div> <div id="column50pright"> </div> </div>
Rashid Jorvee
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.