Làm cách nào để tạo hai cột trên trang web?

Question

Tôi muốn có hai cột trên trang web của mình. Đối với tôi cách simples để làm điều đó là sử dụng một bảng:

<table> 
    <tr> 
     <td> 
     Content of the first column. 
     </td> 
     <td> 
     Content of the second column. 
     </td> 
    </tr> 
</table> 

Tôi thích giải pháp này bởi vì, trước hết, nó hoạt động (nó mang lại cho chính xác những gì tôi muốn), nó cũng là thực sự đơn giản và ổn định (Tôi sẽ luôn có hai cột, bất kể cửa sổ của tôi lớn đến mức nào). Nó rất dễ dàng để kiểm soát kích thước và vị trí của bảng.

Tuy nhiên, tôi biết rằng mọi người không thích bố cục bảng và, theo như tôi biết, họ sử dụng div và css thay thế. Vì vậy, tôi cũng muốn thử phương pháp này. Ai có thể giúp tôi với điều đó không?

Tôi muốn có một giải pháp đơn giản (không có thủ thuật) dễ nhớ. Nó cũng cần phải được ổn định (do đó nó sẽ không vô tình xảy ra rằng một cột là dưới một số khác hoặc họ chồng lên nhau hoặc một cái gì đó như thế).

Answer 1

tôi khuyên bạn nên tìm kiếm bài viết này

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

thấy 4. Đặt cột cạnh nhau đặc biệt

Để làm hai cột (#main và #sidebar) bên hiển thị bởi bên chúng tôi thả nổi, một bên trái và bên kia sang bên phải. Chúng tôi cũng chỉ định độ rộng của các cột.

#main { 
    float:left; 
    width:500px; 
    background:#9c9; 
    } 
    #sidebar { 
    float:right; 
    width:250px; 
    background:#c9c; 
    } 

Lưu ý rằng tổng các độ rộng nên bằng với chiều rộng cho #wrap trong Bước 3.

Answer 2

Các đơn giản và giải pháp tốt nhất là sử dụng bảng cho bố cục. Bạn đang làm đúng. Có một số lý do bảng là tốt hơn.

• Họ thực hiện tốt hơn so với CSS
• Họ làm việc trên tất cả các trình duyệt mà không cần bất kỳ phiền phức
• Bạn có thể gỡ lỗi họ một cách dễ dàng với border = 1 thuộc tính

Answer 3

Về cơ bản bạn cần 3 divs. Đầu tiên là wrapper, thứ hai là left và thứ ba là right.

.wrapper { 
width:500px; 
overflow:hidden; 
} 

.left { 
width:250px; 
float:left; 
} 

.right { 
width:250px; 
float:right; 
} 

Ví dụ làm thế nào để làm cho 2 cột http://jsfiddle.net/huhu/HDGvN/

---

CSS Cheat Sheet để tham khảo

Answer 4

Tôi đồng ý với @haha một ngày này, hầu hết các phần. Nhưng có một số vấn đề liên quan đến trình duyệt chéo với việc sử dụng "float: right" và cuối cùng có thể khiến bạn đau đầu hơn bạn muốn. Nếu bạn biết những gì chiều rộng sẽ được cho mỗi cột sử dụng một phao: trái trên cả hai và tiết kiệm cho mình những rắc rối. Một điều bạn có thể kết hợp vào phương pháp của bạn là xây dựng các lớp cột vào CSS của bạn.

Vì vậy, thử một cái gì đó như thế này:

CSS

.col-wrapper{width:960px; margin:0 auto;} 
.col{margin:0 10px; float:left; display:inline;} 
.col-670{width:670px;} 
.col-250{width:250px;} 

HTML

<div class="col-wrapper"> 
    <div class="col col-670">[Page Content]</div> 
    <div class="col col-250">[Page Sidebar]</div> 
</div> 

Answer 5

Tôi tìm thấy một lưới mát thật mà tôi cũng sử dụng cho các cột. Kiểm tra xem nó ra Simple Grid. Bạn có thể sử dụng CSS này đơn giản:

<div class="grid"> 
    <div class="col-1-2"> 
     <div class="content"> 
      <p>...insert content left side...</p> 
     </div> 
    </div> 
    <div class="col-1-2"> 
     <div class="content"> 
      <p>...insert content right side...</p> 
     </div> 
    </div> 
</div> 

Tôi sử dụng nó cho tất cả các dự án của mình.