Một giải pháp phổ biến cho vấn đề này sử dụng định vị tuyệt đối hoặc phao cắt xén, nhưng những điều này rất khó ở chỗ chúng yêu cầu điều chỉnh rộng nếu các cột của bạn thay đổi về số lượng + kích thước và bạn cần đảm bảo cột "chính" của bạn luôn dài nhất. Thay vào đó, tôi khuyên bạn nên sử dụng một trong ba giải pháp mạnh mẽ hơn:
display: flex: cho đến nay là giải pháp đơn giản & tốt nhất và rất linh hoạt - nhưng không được IE9 hỗ trợ trở lên.tablehoặc display: table: rất đơn giản, rất tương thích (khá nhiều trình duyệt từng có), khá linh hoạt.display: inline-block; width:50% với hack lề âm: khá đơn giản, nhưng viền dưới cùng cột hơi khó.
1. display:flex
Điều này thực sự đơn giản và dễ dàng thích ứng với các bố cục phức tạp hơn hoặc chi tiết hơn - nhưng flexbox chỉ được hỗ trợ bởi IE10 trở lên (ngoài các trình duyệt hiện đại khác).
Ví dụ: http://output.jsbin.com/hetunujuma/1
Html có liên quan:
<div class="parent"><div>column 1</div><div>column 2</div></div>
Css có liên quan:
.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }
Flexbox có hỗ trợ cho nhiều tùy chọn hơn, nhưng chỉ cần có bất kỳ số lượng cột nào là đủ!
2. <table>hoặcdisplay: table
Một cách đơn giản và cực kỳ tương thích để làm điều này là sử dụng một table- Tôi khuyên bạn nên thử trước nếu bạn cần hỗ trợ IE cũ . Bạn đang xử lý các cột; divs + float đơn giản không phải là cách tốt nhất để làm điều đó (chưa kể đến thực tế là nhiều cấp độ div lồng nhau chỉ để hack xung quanh các giới hạn css hầu như không "ngữ nghĩa" hơn là chỉ sử dụng một bảng đơn giản). Nếu bạn không muốn sử dụng tablephần tử này, hãy xem xét cssdisplay: table (không được IE7 hỗ trợ trở lên).
Ví dụ: http://jsfiddle.net/emn13/7FFp3/
Html có liên quan: (nhưng xem xét sử dụng đơn giản<table>thay thế)
<div class="parent"><div>column 1</div><div>column 2</div></div>
Css có liên quan:
.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/
Cách tiếp cận này mạnh mẽ hơn nhiều so với sử dụng overflow:hiddenvới phao. Bạn có thể thêm khá nhiều số cột; bạn có thể có quy mô tự động nếu bạn muốn; và bạn giữ được khả năng tương thích với các trình duyệt cổ xưa. Không giống như giải pháp float yêu cầu, bạn cũng không cần biết trước cột nào dài nhất; các thang đo chiều cao tốt.
KISS: không sử dụng hack nổi trừ khi bạn đặc biệt cần. Nếu IE7 là một vấn đề, tôi vẫn chọn một bảng đơn giản với các cột ngữ nghĩa trong một giải pháp lừa-CSS khó bảo trì, kém linh hoạt bất cứ ngày nào.
Nhân tiện, nếu bạn cần bố cục của mình phản hồi (ví dụ: không có cột nào trên điện thoại di động nhỏ), bạn có thể sử dụng @mediatruy vấn để quay lại bố cục khối đơn giản cho độ rộng màn hình nhỏ - điều này hoạt động cho dù bạn sử dụng <table>hay bất kỳ display: tableyếu tố nào khác .
3. display:inline blockvới một hack lề âm.
Một cách khác là sử dụng display:inline block.
Ví dụ: http://jsbin.com/ovuqes/2/edit
Html có liên quan: (sự vắng mặt của khoảng trắng giữa cácdivthẻ là rất quan trọng!)
<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>
Css có liên quan:
.parent {
position: relative; width: 100%; white-space: nowrap; overflow: hidden;
}
.parent>div {
display:inline-block; width:50%; white-space:normal; vertical-align:top;
}
.parent>div>div {
padding-bottom: 32768px; margin-bottom: -32768px;
}
Điều này hơi khó khăn và lề âm có nghĩa là đáy "thực" của các cột bị che khuất. Đến lượt điều này có nghĩa là bạn không thể định vị bất cứ thứ gì liên quan đến đáy của các cột đó vì điều đó bị cắt đứt overflow: hidden. Lưu ý rằng ngoài các khối nội tuyến, bạn có thể đạt được hiệu ứng tương tự với các số float.
TL; DR : sử dụng flexbox nếu bạn có thể bỏ qua IE9 trở lên; nếu không hãy thử một bảng (css). Nếu cả hai tùy chọn này đều không phù hợp với bạn, có các hack lề âm, nhưng chúng có thể gây ra các vấn đề hiển thị kỳ lạ dễ bỏ sót trong quá trình phát triển và có những hạn chế về bố cục mà bạn cần phải biết.