2010-01-31 25 views
8

Tôi có hai cột cạnh nhau có các màu khác nhau. Nền cũng có một màu duy nhất. Cột bên phải chứa văn bản sẽ mở rộng đến chiều cao không xác định. Cột khác chứa ít hoặc không có gì.CSS thay thế cho mã CSS-jQuery này?

<div id="container"> 
    <div id="leftColumn"> 
     <p>Only one small paragraph here</p> 
    </div> 

    <div id="rightColumn"> 
     <p>Many large paragraphs inside here.</p> 
    </div> 
</div> 

Tôi muốn cột bên trái chính xác là chiều cao làm cột bên phải.

Đây là CSS ...

#leftColumn { 
    display:inline-block; 
    width: 200px; 
} 
#rightColumn { 
    display:inline-block; 
    width: 600px; 
    vertical-align: top; 
} 

Vì vậy, khi tải trang Tôi sử dụng jQuery để thiết lập chiều cao của cột bên trái dựa trên chiều cao của cột bên phải.

$(document).ready(function() { 
    $('#leftColumn').css('height', $('#rightColumn').innerHeight()); 
}); 

Có cách nào để làm điều này chỉ với CSS không?

+0

CSS có thể không phải là công cụ duy nhất cho công việc khi các công cụ khác cho vay mình tốt hơn để một probl em. Bảng HTML không phải là điều ác; mặc dù chúng có thể đã bị lạm dụng trong quá khứ trước khi hỗ trợ CSS tốt, nhưng Tables vẫn có vị trí của chúng.Khi bạn đang nói về chiều cao bằng nhau, Bảng tự động có điều đó và vẫn có thể được kiểm soát thông qua CSS, cho một giải pháp lai sử dụng tốt nhất của cả hai thế giới. Nếu không, nó có thể trở nên phức tạp nhanh chóng nếu sử dụng một công cụ để loại trừ những người khác vì lợi ích của nó. –

+1

Sau đó, một lần nữa tác giả đã yêu cầu một giải pháp CSS duy nhất để có thể cố gắng thực thi lý tưởng của chúng tôi để loại trừ trả lời trực tiếp câu hỏi đang làm việc chống lại quá trình. –

Trả lời

4

Có một vài cách khác để đạt được bố trí này bên cạnh việc sử dụng Javascript.

Phương pháp bao gồm:

  • Sử dụng display: table trên các yếu tố
  • cột Faux (hình ảnh nền trên yếu tố phụ huynh)
  • Thêm nhiều container div cho mỗi nền
  • Dùng bảng (không phải là rất phổ biến vì lý do rõ ràng)

Tất cả những điều này đều có những ưu điểm khác nhau, những hạn chế và từng giới thiệu những cơn đau đầu của chính họ đối với sự phát triển của trang web. Tôi muốn bỏ phiếu cho việc sử dụng các cột giả vì nó giữ html đơn giản nhất và tương thích với tất cả các trình duyệt.

đọc thêm:

+0

điểm yếu để sử dụng hiển thị: bảng trên div là gì? –

+0

@Jitendra - IE 6/7 không hỗ trợ hiển thị: bảng. –

+0

Cảm ơn bạn đã có danh sách các tùy chọn tốt. Tôi sẽ phải xem xét những gì sẽ là tốt nhất cho thiết kế của tôi. Tùy chọn ba trông giống như một cái gì đó mà có thể làm việc tốt. Các cột giả cũng có vẻ tốt, nhưng tôi không chắc chắn nếu tôi muốn đối phó với sự khác biệt mô hình hộp giữa IE và các trình duyệt khác. – user182666

0

nó có thể được thực hiện dễ dàng với <table>

+1

Trừ khi anh ta hiển thị dữ liệu dạng bảng, đó là Ý tưởng tồi (tm) – rossipedia

+0

Bị bỏ qua (xin lỗi) vì đó là một lời khuyên không tốt. – metrobalderas

+3

@Bryan Ross - Làm các vòng lặp trong không khí để đạt được điều gì đó với một công cụ đơn giản và hiện có thường là một ý tưởng tồi trong lập trình. Bên cạnh đó, divs thậm chí còn ít ngữ nghĩa hơn so với bảng. –

0

Tôi không chắc chắn nếu có một CSS cách tinh khiết để làm điều này (có thể trong CSS3). Nhưng bạn nên đọc bài viết này và xem nó có phù hợp với bạn hay không.

http://www.alistapart.com/articles/fauxcolumns/

Nếu không, bạn có thể xem xét kỹ thuật này (mà đòi hỏi một LOT đánh dấu ngớ ngẩn).

http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm

+0

Tại sao lại là downvote? Cái quái gì thế? – jessegavin

+0

+1 cho liên kết thứ hai .. nó không có nhiều đánh dấu ngớ ngẩn .. thêm div gói cho mỗi cột .. –

Các vấn đề liên quan