Các cột có cùng chiều cao. Các khối có cùng chiều cao

Các cột thu được bằng cách sử dụng các ô của bảng có cùng chiều cao. Điều này không có gì đáng ngạc nhiên, vì các ô được kết nối với nhau và khi chiều cao của một ô tăng lên thì chiều cao của các ô liền kề cũng tăng theo. Nhiều nhà phát triển cố gắng tạo hiệu ứng tương tự bằng cách sử dụng các lớp, tức là. làm cho chúng được kết nối với nhau và có cùng chiều cao, bất kể khối lượng nội dung. Trên thực tế, khi bố trí theo lớp, chiều cao của các cột được đặt tự động dựa trên khối lượng nội dung. Vì vậy, các kỹ thuật nhân tạo để tạo cột cùng chiều cao mâu thuẫn với chính hệ tư tưởng của các tầng lớp.

Như vậy, có thể thấy sự phân chia rõ ràng về các cách tiếp cận bố cục:

• nếu các lớp được sử dụng thì các cột phải có chiều cao được xác định bởi nội dung của chúng;
• các cột có cùng chiều cao được xây dựng bằng bảng.

Việc bỏ qua các nguyên tắc này sẽ dẫn đến sự phức tạp của mã và xuất hiện lỗi trong việc hiển thị tài liệu của trình duyệt, do đó, thời gian phát triển trang web và việc gỡ lỗi của nó tăng lên. Một ngoại lệ là việc sử dụng thuộc tính chiều cao để đặt chiều cao của các lớp. Ví dụ 5.32 cho thấy cách tạo bố cục như vậy.

Ví dụ 5.32. Sử dụng chiều cao

Kết quả của ví dụ này được hiển thị trong Hình. 5,23.

Cơm. 5,23. Các cột có cùng chiều cao

Rõ ràng là khối lượng văn bản trong các cột có thể khác nhau, do đó chiều cao thường được biểu thị bằng lề. Bạn cũng có thể thêm thuộc tính tràn với giá trị auto . Nếu văn bản vượt quá chiều cao nhất định, một thanh cuộn sẽ xuất hiện.

Ngoài ra còn có các phương pháp dựa trên sự đánh lừa thị giác. Các cột trông giống nhau bằng cách sử dụng đường viền làm cột, thêm Hình nền hoặc màu nền. Trên thực tế, chiều cao của chúng lẽ ra phải được xác định bởi nội dung.

Đường viền dưới dạng cột

Bản chất của phương pháp như sau: chúng ta đặt đường viền ở bên trái hoặc bên phải của phần tử, chiều rộng của đường viền này trùng với chiều rộng của một trong các cột. Rõ ràng là ranh giới được thiết kế cho những mục đích hoàn toàn khác nhau, nhưng trong trong trường hợp này Sử dụng chúng theo cách này cho phép bạn có được kết quả mong muốn. Để thực hiện việc này, hãy tạo một lớp có tên là bố cục và đặt kiểu cho nó, như hiển thị bên dưới.

Bố cục ( border-left: 200px Solid #c7e3e4; /* Độ rộng đường viền và màu cột bên trái */ nền: #e0d2c7; /* Màu nền của cột bên phải */ )

Vì chúng ta chỉ có một lớp nên các cột được mô phỏng bằng cách sử dụng đường thẳng đứng và nền luôn có cùng chiều cao. Tất cả những gì còn lại là đặt thông tin chính xác lên trên đường viền. Đối với cột bên trái, hãy gọi nó là col1, bạn nên đặt độ rộng và sử dụng thuộc tính kiểu float để cho biết đó là phần tử nổi. Vì đường viền không phải là một phần của khối văn bản nên chúng ta cần di chuyển lớp col1 sang bên trái bằng cách thêm thuộc tính lề trái có giá trị âm bằng chiều rộng của đường viền.

Col1 ( width: 200px; /* Chiều rộng của cột bên trái */ float: left; /* Biến nó thành phần tử nổi */ lề trái: -200px; /* Dịch chuyển mọi thứ sang trái theo chiều rộng của đường viền * / )

TRONG trong ví dụ này Việc kết hợp các thuộc tính float và lề trái cho phép bạn định vị nội dung của lớp trực tiếp trên đầu đường viền. Đối với cột bên phải col2 không có điều kiện bổ sung Không cần chỉ định, văn bản sẽ được định vị theo yêu cầu của chúng tôi.

Do sử dụng phần tử nổi nên có thể xảy ra trường hợp văn bản ở cột bên trái vượt ra ngoài hình chữ nhật màu. Để ngăn điều này xảy ra, bạn nên ghi đè thuộc tính float bằng cách sử dụng clear . Trong trường hợp này, bạn không thể sử dụng tràn : ẩn; khoảng trống bên trong đường viền, bao gồm cả cột giả của chúng tôi, sẽ bị cắt bỏ. Mã cuối cùng thể hiện trong ví dụ 5.33.

Ví dụ 5.33. Hai cột

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Kết quả của ví dụ được hiển thị trong Hình. 5,24.

Cơm. 5,24. Hai cột được tạo bằng đường viền

Để tạo bố cục ba cột, cần thêm đường viền vào bên trái và bên phải của vùng chứa bố cục. Để đa dạng, chiều rộng của cột bên phải được biểu thị bằng em (không thể chỉ định đường viền dưới dạng phần trăm).

Bố cục ( border-left: 200px Solid #c7e3e4; /* Độ rộng viền và màu của cột bên trái */ border-right: 15em Solid #ecd5de; /* Độ rộng viền và màu của cột bên phải */ Background: #e0d2c7; / * Màu nền các cột ở giữa */ )

Đối với cột đầu tiên mã phong cách không thay đổi và cột thứ ba sẽ cho biết tài sản nổi với giá trị bên phải và di chuyển nó sang bên phải bằng thuộc tính lề phải (Ví dụ 5.34).

Ví dụ 5.34. Ba cột

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Kết quả của ví dụ được hiển thị trong Hình. 5,25.

Cơm. 5,25. Ba cột được tạo bằng đường viền

Trình duyệt IE6 có lỗi về đường viền và không hiển thị chính xác các ví dụ này. Để nó hiển thị bố cục chính xác, kích thước đường viền của nó phải giảm đi một nửa.

Hình nền

Nguyên tắc sử dụng hình nền cho các cột dựa trên thực tế là chúng ta thấy một hình ảnh lặp lại theo chiều dọc, bên trên là văn bản và các phần tử khác. Vì chúng ta cần tạo hiệu ứng cho các cột nên nền không được thêm vào các cột riêng lẻ mà được thêm vào phần gốc của chúng. Điều quan trọng ở đây là nó là loại nền gì, nó là gì và kích thước của nó là gì. Giả sử chúng ta có bố cục cố định hai cột với chiều rộng 980 pixel, Cột bên trái chiếm chiều rộng 200 pixel. Tạo một hình ảnh có kích thước 980x60 pixel. Chiều rộng tương ứng với chiều rộng của bố cục và chiều cao thường là 20–30 pixel.

Nhiều nhà phát triển tạo ảnh cao 1–2 pixel vì tin rằng kích thước tệp sẽ tối thiểu và tải sẽ nhanh hơn. Tuy nhiên, điều ngược lại mới đúng. Máy tính mất nhiều thời gian hơn để hiển thị một trang có nền hẹp, điều này đặc biệt đáng chú ý khi cuộn cửa sổ trình duyệt. Vì vậy, khi sử dụng ảnh nền, hãy đặt ảnh cao ít nhất 20-30 pixel - điều này sẽ hiển thị ảnh trên trang nhanh hơn.

Thật quá nhàm chán khi làm cho các cột đơn sắc, vì chúng ta đang xử lý hình ảnh, vì vậy hãy thêm một số dấu phân cách ở các cạnh của cột (Hình 5.26). Điều quan trọng nhất ở đây là mô hình được lặp lại mà không có khớp dọc.

Cơm. 5,26. Hình nền

Bây giờ chúng ta chèn nền cho lớp bố cục, bên trong chứa các cột của chúng ta (ví dụ 5.35).

Ví dụ 5.35. Nền cho bố cục cố định

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Kết quả của ví dụ này được hiển thị trong Hình. 5,27. Có thể thấy rõ rằng các cột có cùng chiều cao.

Cơm. 5,27. Các cột có chiều cao bằng nhau được tạo bởi hình nền

Khi sử dụng bất kỳ yếu tố trang trí nào trong bản vẽ, cần lưu ý rằng văn bản từ chúng sẽ di chuyển ra xa phần đệm và không bị "dính".

Đối với ba cột trở lên trong một bố cục cố định, quá trình chuẩn bị hình ảnh cũng tương tự, nhưng đối với bố cục linh hoạt, có một số tính năng do thực tế là chiều rộng của bố cục có thể nằm trong khoảng phạm vi rộng. Sau đó, hình nền phải được làm rộng một cách có chủ ý, chẳng hạn như 2000 pixel. Nền không ảnh hưởng đến chiều rộng của trang web và nếu nó không vừa với kích thước được phân bổ thì nó sẽ bị cắt đi. Chúng tôi sẽ tận dụng chất lượng này. Như một ví dụ, hãy xem xét mô hình cao su với cột bên phải cố định rộng 300 pixel. Đối với nó, chúng tôi sẽ tạo một hình ảnh rộng 2000x30 pixel với hình chữ nhật màu đỏ sẫm ở bên phải (Hình 5.28).

Cơm. 5,28. Nền cho mockup cao su

Cột cố định nằm ở bên phải nên nền cũng phải được đặt ở góc trên bên phải, chỉ định 100% 0 cho thuộc tính nền (Ví dụ 5.36).

Ví dụ 5.36. Nền cho mockup cao su

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Cuối cùng, tôi sẽ liệt kê những ưu và nhược điểm của việc sử dụng nền làm cột nhân tạo.

thuận

• Phương pháp này đơn giản và không yêu cầu thay đổi mã hiện có.
• Bạn có thể thêm khác nhau yếu tố trang trí như độ dốc, đường kẻ, v.v. Điều này sẽ cho phép bạn đa dạng hóa thiết kế của các cột.

Nhược điểm

• Kết quả tốt nhất thu được khi một hoặc tất cả các cột có kích thước cố định. Đối với bố cục có chiều rộng của các cột là cao su, sẽ không thể thêm nền chính xác.
• Nếu bạn tắt hình ảnh trong trình duyệt, văn bản có thể không đọc được. Tuy nhiên, điều này có thể dễ dàng tránh được bằng cách đặt màu nền cùng với hình nền.
• Tệp hình nền có thể có khối lượng lớn và mất nhiều thời gian để tải. Lưu ý rằng đối với hình ảnh đơn giản, giống như thể hiện trong hình. 5.27, điều này không đúng; với kích thước 2000x30 pixel, tệp chỉ chiếm 275 byte.

Màu nền

Khi mô phỏng các cột có cùng chiều cao bằng hình nền, nó sẽ được thêm thông qua thuộc tính nền vào phần tử cha của các cột (lớp lớp). Màu nền hoạt động theo cách tương tự. Chỉ cần đặt nó cho lớp lớp và tạo màu riêng cho cột cao nhất là đủ. Ví dụ 5.37 hiển thị bố cục ba cột trong đó màu nền của các cột bên được đặt qua lớp lớp và màu nền của cột giữa được đặt qua lớp col2.

Ví dụ 5.37. Công dụng màu nền cho loa

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Thuộc tính chiều cao trong ví dụ đã được thêm vào để hiển thị hiệu ứng màu sắc trên các cột. Trong thực tế nó không cần thiết.

Phương pháp này có một số nhược điểm cần được tính đến trong thực tế.

• Rất khó để ước tính trước cột nào sẽ có chiều cao lớn nhất.
• Để “tô màu” các cột, chỉ có hai màu được sử dụng, do đó không thể tạo cho ba cột trở lên một màu khác nhau và chúng có cùng chiều cao.

Phương pháp này cũng có những ưu điểm nhưng có thể diễn đạt chỉ bằng vài từ: sự đơn giản và tinh tế của giải pháp. Vì vậy, phương pháp này có thể được tìm thấy khá thường xuyên trong bố cục, đặc biệt, nó được sử dụng trên trang web W3C.

Chúng tôi sẽ sử dụng danh sách làm đánh dấu. Trong mọi phần tử lý Chúng tôi sẽ đăng một hình ảnh của sản phẩm và mô tả của nó. Hình ảnh được chụp có chủ ý kích cỡ khác nhau. Theo quy định, khi lấp đầy một trang web, quản trị viên hiếm khi nghĩ đến thực tế là hình ảnh phải được tối ưu hóa và tải chúng lên trang web. Nhiệm vụ của chúng ta sẽ là căn giữa các bức tranh và làm cho tất cả các khối có cùng chiều cao.

• 
• 
• 
• 
• 
  Văn bản cổ điển của Lorem Ipsum được sử dụng từ thế kỷ 16 xuất hiện bên dưới.
• 
  Văn bản Lorem Ipsum cổ điển.
• 
  Văn bản cổ điển của Lorem Ipsum được sử dụng từ thế kỷ 16 xuất hiện bên dưới. Văn bản Lorem Ipsum cổ điển.
• 
  Văn bản kinh điển của Lorem Ipsum được sử dụng từ thế kỷ 16.

Hãy thêm phong cách thiết kế. Tôi sẽ không nói chi tiết về chúng - ở đây, như người ta nói, mọi người đều có thể tự do áp dụng những gì họ thấy phù hợp.

Chọn_main ( lề:40px auto 0; chiều rộng:800px; ) ul ( chiều rộng:100%; ) li ( lề:0 10px 20px 5px; đệm:10px; chiều rộng:160px; hiển thị:khối nội tuyến; căn chỉnh dọc:top; *display:inline; *zoom:1; border:1px Solid #e5e5e5 ) .img ( width:100%; Height:121px; text-align:center; display:table; location:relative; ) .img span ( display :table-cell; căn chỉnh dọc:giữa ) .img img ( width:100%; )

Bây giờ chúng ta hãy vào trang và xem những gì chúng ta có. Nếu mọi thứ ít nhiều đều ổn với bức ảnh, thì với bản thân các khối, bức ảnh đó thật khó coi. Cùng viết nào kịch bản nhỏ, điều này sẽ giúp bạn dễ dàng khắc phục sự cố này.

$(document).ready(function())( var maxH = 0; $("li").each(function () ( var h_block = extractInt($(this).height()); if(h_block > maxH ) ( maxH = h_block; )); $("li").height(maxH));

Chúng tôi lưu, tải lại trang và chiêm ngưỡng công việc đã hoàn thành. Tất cả các khối giả định có cùng chiều cao.

Bây giờ chi tiết hơn một chút về những gì chúng tôi đã viết ở đây. Khai báo một biến tối đaH và gán cho nó một giá trị 0 . Tiếp theo, chọn tất cả các phần tử lý trong thư mục và duyệt qua chúng theo vòng lặp bằng hàm mỗi. Trong phần thân vòng lặp chúng ta khai báo một biến khác h_block trong đó chúng tôi lưu trữ giá trị chiều cao của từng phần tử lý, được làm tròn thành số nguyên bằng hàm phân tích cú phápInt. Vẫn trong cùng một vòng lặp, chúng ta đặt điều kiện - nếu giá trị của khối hiện tại lớn hơn giá trị trong biến tối đaH, thì chúng ta gán giá trị này cho giá trị sau. Nói cách khác, chúng ta kiểm tra chiều cao của mỗi khối và lưu chiều cao lớn nhất vào một biến tối đaH. Và cuối cùng, đã trải qua tất cả lý và sau khi tính toán chiều cao lớn nhất, chúng tôi gán nó cho tất cả các khối (dòng $("li").height(maxH);).

Tuy nhiên, phương pháp này có một nhược điểm. Giả sử quản trị viên đã thêm quá nhiều văn bản vào một trong các khối. Bằng cách áp dụng phương pháp được mô tả ở trên, chúng ta sẽ căn chỉnh tất cả các khối ở mức cao nhất và có được nhiều không gian trống ở phía dưới trong phần còn lại.

Không thể khắc phục hoàn toàn tình trạng này (trừ khi bạn giảm âm lượng văn bản trong phần có vấn đề), nhưng hoàn toàn có thể giảm thiểu nhược điểm đến mức tối thiểu.

Hãy viết lại kịch bản. Cũng giống như lần đầu tiên, nó sẽ căn chỉnh các khối lên cao nhất, nhưng sẽ thông minh hơn một chút khi thực hiện việc này. Chúng ta sẽ dạy bé đếm số lượng lý trong mỗi hàng và căn chỉnh chúng theo hàng cao nhất trong hàng thay vì cao nhất trên trang.

$(document).ready(function())( var line = $("li"); var Times = 0, row = Array(), max = 0; line.each(function() ( if (times == 4 ) ( for (var i = 0; i< rows.length; i++) { rows[i].css("height", max); } max = 0; times = 0; rows = ; } if (max < $(this).height()) { max = $(this).height(); } rows = $(this); times += 1; }); if (times != 0) { for (var i = 0; i < rows.length; i++) { rows[i].css("height", max); } } });

Đó là tất cả. Việc sử dụng phương pháp nào phải được quyết định tùy thuộc vào tình huống, nhưng trong mọi trường hợp, phương pháp thứ hai phổ biến hơn.

Bài viết giải quyết vấn đề căn chỉnh chiều cao của container với văn bản có kích thước khác nhau bằng cách sử dụng nguyên tắc bố cục khối.

Khi viết tài nguyên thông tin Họ thường sử dụng sơ đồ nhiều cột. Nói cách khác, nội dung trang được chia thành nhiều cột. Nguyên tắc này thường được sử dụng nhiều hơn cho phần văn bản của nội dung. Tuy nhiên, số lượng văn bản trong mỗi cột có thể khác nhau. Câu hỏi đặt ra là làm thế nào để đảm bảo rằng khi kích cỡ khác nhau văn bản được căn chỉnh theo chiều cao của cột và ban đầu chiều cao của khối vẫn chưa xác định. Dưới đây là sơ đồ của hai trường hợp khác nhau

Trong hai phương án được trình bày, phương án đầu tiên phổ biến hơn. Vì vậy hôm nay chúng ta sẽ xem xét những lựa chọn khả thi thực hiện các thiết kế như vậy. Cũng cần lưu ý rằng đối với cách bố trí bảng lỗi thời, vấn đề này hoàn toàn không có vấn đề gì, nhưng với bố trí khối, vốn thống trị thời đại của chúng ta, một số khó khăn nảy sinh. Nhưng chưa bao giờ có vấn đề nào mà sự khéo léo và chăm chỉ không thể giải quyết được.

Hình nền

Vì vậy, ý tưởng này khá dễ đoán và dễ hiểu (vì nhiều vấn đề được giải quyết bằng cách thay thế nó bằng một bức tranh), nó có một số ưu điểm không thể bỏ qua:

• khả năng tương thích trình duyệt cao;
• không có vấn đề gì với việc xác nhận;
• số lượng khối phụ trợ tối thiểu được sử dụng, giúp giảm số lượng mã HTML.

Như thường lệ, không có ưu điểm nào mà không có nhược điểm:

• tải trên máy chủ do sử dụng số lượng bổ sung những bức ảnh;
• chỉ hoạt động nếu biết chiều rộng chính xác của các cột.

Nguyên lý hoạt động phương pháp này là cha mẹ không được đặt thành giá trị chiều cao. Nó xảy ra do chiều cao của cột cao nhất có văn bản. Và để làm cho chiều cao của các cột có vẻ bằng nhau một cách trực quan, chúng tôi tạo một hình ảnh với các màu nền khác nhau cho các cột của mình. Bức tranh này sẽ trông giống như một sọc ba màu

Nên sử dụng chiều cao của dòng này là 1 pixel để tiết kiệm kích thước hình ảnh. Chúng tôi thiết lập sự lặp lại theo chu kỳ của hình ảnh này dọc theo trục tọa độ và nhận được các cột có cùng chiều cao (ít nhất là về mặt trực quan). Dưới đây là mã thực hiện phương pháp này.

HTML

< div class = "background" > < div class = "left" > < div class = "center" > < div class = "right" >

Fon ( width: 600px; nền: url(fon. png) lặp lại- y; float: left; ). trái (chiều rộng: 200px; float: left; ). ở giữa (chiều rộng: 200px; float: left; ). phải (chiều rộng: 200px; float: trái; )

Kết quả là trên trình duyệt chúng ta có được hình ảnh sau:

lề + phần đệm + tràn

Tôi sẽ mô tả quyết định này là kiêu ngạo nhưng rất hiệu quả. Nguyên tắc hoạt động của nó là tạo ra phần tử cha với rất giá trị lớn chiều cao, đạt được nhờ giá trị của thuộc tính phần đệm dưới cùng, nhưng đồng thời được bù bằng cùng một giá trị âm của lề ngoài - lề dưới. Và ngoài ra, chúng tôi thêm thuộc tính tràn cho cha mẹ với giá trị ẩn giấu, sẽ cắt chiều cao của cột cha thành chiều cao của cột lớn nhất.

Để làm điều này, hãy viết mã

HTML

< div class = "background" > < div class = "left" > < div class = "center" > < div class = "right" >

Nền ( chiều rộng: 600px; tràn: ẩn; ). trái ( chiều rộng: 200px; float: left; nền: #fc7777; phần đệm- đáy: 20000px; lề- đáy: - 20000px; ). giữa ( chiều rộng: 200px; float: trái; nền: #7780fc; phần đệm- dưới cùng: 20000px; lề- dưới cùng: - 20000px; ). phải ( chiều rộng: 200px; float: trái; nền: #fcaf77; phần đệm- dưới cùng: 20000px; lề- dưới cùng: - 20000px; )

Kết quả trong trình duyệt sẽ tương tự như phương pháp trước đó.

Phương pháp này sẽ có những tác dụng tích cực sau:

• cung cấp cách bố trí cao su của các khối;
• loại bỏ tải trên máy chủ do có thêm số lượng hình nền;
• phản ứng tích cực khi kiểm tra tính hợp lệ của mã;
• giảm thiểu việc sử dụng các thùng chứa phụ trợ, làm giảm mã.

Sai sót:

• trong các phiên bản cũ hơn Trình duyệt Opera không hoạt động vì chương trình này diễn giải thuộc tính tràn không chính xác.

Phương pháp bao bọc bổ sung

Trong trường hợp này, bạn cần tạo thêm một lớp bao bọc có màu thích hợp cho từng cột, sau đó hiển thị từng nền cho một cột cụ thể. định vị tương đối. Nguyên lý hoạt động rất khó hiểu; bạn có thể tìm hiểu thêm về cách thức hoạt động của phương pháp này từ tác giả của ý tưởng, Matthew Taylor. Tuy nhiên, không đi sâu vào chi tiết, bạn có thể sử dụng mẫu bên dưới của anh ấy

HTML

< div class = "background1" > < div class = "background2" > < div class = "background3" > < div class = "left" > < div class = "center" > < div class = "right" >

Nền1 ( chiều rộng: 100%; nền: #fc7777; float: trái; vị trí: tương đối; phải: 30%; ). nền2( chiều rộng: 100%; nền: #7780fc; float: trái; vị trí: tương đối; phải: 40%; ) . nền3 (chiều rộng: 100%; nền: #fcaf77; float: left; ). trái ( chiều rộng: 30%; float: trái; tràn: ẩn; vị trí: tương đối; trái: 70%; ). trung tâm (chiều rộng: 30%; float: trái; tràn: ẩn; vị trí: tương đối; trái: 70%; ). phải ( chiều rộng: 39%; float: trái; tràn: ẩn; vị trí: tương đối; trái: 70%; )

Kết quả trong trình duyệt sẽ hoàn toàn giống với các phương pháp trước đó.

Các đặc điểm tích cực sau đây đáng chú ý đối với phương pháp này:

• được hỗ trợ bởi tất cả các trình duyệt;
• tuân thủ các nguyên tắc của cái gọi là “bố trí cao su”;
• lưu chỉ báo tính hợp lệ của mã.

Tác dụng không mong muốn của cách bố trí được đề cập:

• một số lượng lớn các thùng chứa bổ sung (số lượng của chúng tương ứng với số lượng cột - điều kiện bắt buộcđể phương pháp này hoạt động).

Nó hoạt động trong những trình duyệt nào?

6.0+	1.0+	9.5+	3.1+	2.0+

• Dịch

Trước đây, khi mọi thứ được thực hiện bằng cách sử dụng bảng, việc tạo các cột có cùng chiều cao rất dễ dàng. Ví dụ, chỉ cần tạo một bảng có 3 cột là đủ và tất cả chúng sẽ tự động có cùng chiều cao. Nhưng trong cách bố trí khối, không phải mọi thứ đều đơn giản như vậy.
Trong bài viết này tôi sẽ giới thiệu cho các bạn một số cách tạo cột chiều cao bằng nhau và khả năng tương thích của các phương pháp này với các trình duyệt (bao gồm IE6). Tất cả các phương pháp này mô tả việc tạo bố cục 3 cột.

Cách 1: Sử dụng thuộc tính display: table

Để triển khai bố cục, hãy sử dụng danh sách (ul) hoặc khối div với các khối lồng nhau cho một hàng và mỗi cột. đóng khung khối divđược gán giá trị display: table và mỗi khối cột lồng nhau được gán giá trị display: table-cell .
Hãy xem một ví dụ với một danh sách.
Mã HTML:

• .....Rất nhiều nội dung....


• .....Rất nhiều nội dung....


• .....Rất nhiều nội dung....

CSS:

.căn cứ(
/*làm cho nó có chiều rộng 100% và chiều rộng tối thiểu 1000px*/
chiều rộng: tự động;
lề trái: 0px;
lề phải: 0px;
chiều rộng tối thiểu: 1000px;
phần đệm: 0px;
hiển thị:bảng;
}
.hàng cơ sở (
Hiển thị: hàng bảng;
}
.baseli (
hiển thị: ô bảng;
chiều rộng: 33%;
}
.cell1 (
màu nền: #f00;
}
.cell2 (
màu nền: #0f0;
}
.cell3 (
màu nền: #00f;
}

Thuận lợi:

Đây là cách đơn giản nhất và cách dễ dàng tạo các cột có cùng chiều cao, không giống như các phương pháp khác.
Không thể tạo lề ngoài (lề, như khoảng cách ô cho bảng) bằng nhau cho tất cả các cột, tuy nhiên, có thể thay thế bằng đường viền trắng(hoặc màu nền của cột) với chiều rộng thích hợp để mô phỏng thụt lề.

Sai sót:

Phương pháp này không hoạt động trong trình duyệt IE7 trở xuống. Sẽ còn rất lâu nữa (khi IE7 trở thành IE6 mới) chúng ta mới có thể sử dụng phương pháp này một cách an toàn.

Phương pháp 2: Sử dụng JavaScript

Phương pháp này dựa trên việc sử dụng một mã JS nhỏ (JQuery) để “sắp xếp” chiều cao mong muốn cho mỗi cột dựa trên chiều cao của cột dài nhất.
Mã HTML:

… Rất nhiều nội dung…

…. Rất nhiều nội dung…

… Rất nhiều nội dung…

CSS:

.thùng đựng hàng(
Chiều rộng: 900px;
Lề trái: tự động;
Lề phải: tự động;
}
.Thanh bên trái(
Phao: trái;
Chiều rộng: 33%;
}
.nội dung(
Phao: trái;
Chiều rộng: 33%;
}
.quyền bổ sung(
Phao: trái;
Chiều rộng: 33%;
}

JavaScript (jQuery):

hàm setEqualHeight(cột)
{
var cao nhấtcột = 0;
cột.each(
chức năng()
{
currentHeight = $(this).height();
if(currentHeight > cột cao nhất)
{
cột cao nhất = currentHeight;
}
}
);
cột.height(cột cao nhất);
}
$(document).ready(function() (
setEqualHeight($(".container > div"));
});

Bạn có thể đặt mã JS vào tập tin riêng biệt và gọi nó trực tiếp trong mã HTML. Trong trường hợp này, quá trình khởi tạo JQuery phải được đặt phía trên mã.
Mã bạn cần thay đổi là tên của lớp khối tạo ra các cột. Trong ví dụ này, đây là lớp container:

Bạn có thể thay đổi tên của lớp khối cột hoặc thậm chí thêm một lớp vào từng khối cột và sử dụng chúng riêng biệt để thuận tiện.

Thuận lợi:

Ưu điểm chính của phương pháp này là nó hoạt động trên tất cả các trình duyệt và bạn không cần phải bận tâm đến mã CSS để căn chỉnh chiều cao.

Sai sót:

Nếu tắt JavaScript, các cột sẽ không có chiều cao bằng nhau. Tuy nhiên, theo quy định, đây là một trường hợp rất hiếm, bởi vì... Hầu hết các trang web hiện đại đều yêu cầu bật JS.

Cách 3: cột nhân tạo

Phương pháp này là một trong những phương pháp đầu tiên triển khai các cột có cùng chiều cao. Bản chất của nó là khối khung được gán một nền bắt chước các cột (xem hình bên dưới). Chúng chỉ đơn giản được đặt trên nền này. Hiệu ứng chiều cao bằng nhau được tạo ra bởi nền lặp lại.

Mã HTML:

CSS:

.thùng đựng hàng(
hình nền: brick.png;
lặp lại nền: lặp lại-y;
chiều rộng: 900px;
lề trái: tự động;
lề phải: tự động;

Thanh bên trái (
nổi: trái;
chiều rộng: 200px;
}

Nội dung(
nổi: trái;
chiều rộng: 400px;
}

Phải(
nổi:trái;
chiều rộng: 300px;
}

Rõ ràng hơn (
rõ ràng: cả hai;
}

Thuận lợi:

Thực hiện rất đơn giản.

Sai sót:

Phương pháp này chỉ có thể được sử dụng cho bố cục/cột có chiều rộng cố định.

Cách 4: Sử dụng các khối riêng biệt có nền

Phương pháp này dựa trên việc sử dụng các div riêng biệt, mỗi div có nền riêng và lấy chiều cao của phần tử chứa trong đó.
Mã HTML:

…Rất nhiều nội dung…

…Rất nhiều nội dung…

…Rất nhiều nội dung…

CSS:

.ngay phía sau(
chiều rộng: 100%;
nổi:trái;
màu nền: xanh lá cây;
tràn:ẩn;
vị trí: tương đối;
}
.contentback(
nổi:trái;
màu nền: xanh dương;
chiều rộng: 100%;
vị trí: tương đối;
phải: 300px; /* chiều rộng của thanh bên phải */
}
.leftback(
chiều rộng: 100%;
vị trí: tương đối;
phải: 400px; /* chiều rộng của vùng nội dung */
nổi:trái;
màu nền: #f00;
}

Thùng đựng hàng (
chiều rộng: 900px;
lề trái: tự động;
lề phải:tự động;
}

Thanh bên trái (
nổi:trái;
chiều rộng: 200px;
tràn:ẩn;
vị trí: tương đối;
trái: 700px;
}

Nội dung(
nổi:trái;
chiều rộng: 400px;
tràn:ẩn;
vị trí: tương đối;
trái: 700px;
}

Quyền bổ sung (
nổi:trái;
tràn:ẩn;
chiều rộng: 300px;
màu nền:#333;
vị trí: tương đối;
trái: 700px;
}

Có vẻ không dễ dàng phải không? Điều chính là phải hiểu 5 điểm chính:

1. .rightback, .contentback và .leftback chứa các phần tử .leftsidebar, .content và .rightsidebar, lần lượt chứa văn bản.
2. Mỗi khối lồng nhau chịu trách nhiệm về màu sắc/nền của cột. Trong ví dụ này
   .leftback gặp .leftsidebar,
   .contentback – .content
   và .rightback – .rightsidebar.
3. Ngoại trừ khối cuối cùng (chịu trách nhiệm về cột ngoài cùng bên phải), mỗi khối
   phần đệm bên phải được đặt bằng chiều rộng của phần tử liền kề bên phải chứa nền. Trong ví dụ này, .contentback (chịu trách nhiệm về nền.content) được dịch chuyển sang trái 300px (là chiều rộng của block.rightsidebar). (nhìn bức ảnh bên dưới)
4. Các cột .leftsidebar, .content và .rightsidebar nằm xen kẽ nhau với độ rộng nhất định.
5. Họ cung cấp vết lõm bên trái bằng tổng chiều rộng của mỗi cột ngoại trừ cột ngoài cùng bên phải. Những thứ kia. chúng bằng=width.rightsidebar(300px) và.content(400px) = 700px.(B+G)

Hình bên dưới cho thấy cách sắp xếp các khối .rightback, .contentback và .leftback. Cái ở ngoài cùng bên trái là .rigthback, cái ở ngoài cùng bên phải là .leftback.

Đường chấm chấm hiển thị vùng hiển thị của các cột (khối phía sau bên phải được cắt bớt tràn: ẩn).
Trong hình bên dưới, những đường màu đen nằm phía dưới những đường màu đỏ là nội dung của các phần tử