CSS: Hai cột, chiều cao cân bằng với tùy chọn cho cột bên trái

Question

Tôi có danh sách thứ tự phim. Mỗi bộ phim có một tên và một mô tả. Độ dài mô tả thay đổi. Tôi liệt kê những bộ phim từng người một trong hai cột, khoảng như thế này:

 
1. Blues Brothers      | 4. Lord of the Rings 
    Cheesy movie about two guys.  |  A hobbit and his buddies go 
             |  to destroy some ring. 
2. Jurassic Park.      | 
    Some guy makes dinosaurs and some | 5. Can't Think Of Any More 
    chick uses 3D UNIX!     |  Lorem ipsum dolor sit amet. 
             |  Dolor sit amet lorem ipsum!!! 
3. Wayne's World      | 
    Party movie deluxe!     | 6. This Is The Last 
             |  Now we're not balanced! 
             |  Pretty messed up. 

Trên đây sẽ cho bạn một ý tưởng về cách nó trông ngày hôm nay. Tôi hiện đang hoàn thành việc này bằng cách lấy danh sách các bộ phim và tách nó thành một nửa rồi sau đó dựng lại từng nửa và làm nổi các nửa bên cạnh nhau.

Tuy nhiên, có sự cố! Hãy tưởng tượng trường hợp các phim trong cột bên phải tất cả đều có mô tả dài hơn so với các phim ở cột bên trái. Sau đó, sự cân bằng chiều cao sẽ là cách tắt!

Vì vậy, có cách nào không JavaScript để làm cho loại điều này được cân bằng không? Nếu có, trình duyệt nào hỗ trợ nó?

Answer 1

Thật không may, cách không có chương trình duy nhất để tràn nội dung ở trạng thái nháp cho CSS3. Không có cách đáng tin cậy nào để tràn nội dung vào một cột mới trong CSS2.1.

Xem các liên kết dưới đây để biết dự thảo selectors tràn nội dung:

http://www.w3.org/TR/css3-multicol/

Answer 2

Làm như bạn đang sử dụng nhưng sử dụng hình nền lặp lại có đường thẳng xuống giữa cho vùng chứa của các cột div. Tôi tin rằng kỹ thuật này được gọi là "faux columns".