CSS - Cột cố định-lỏng

Question

Trong phần nội dung của trang web, tôi đang cố gắng tạo hai cột - một ở bên phải với chiều rộng cố định (300px) cho quảng cáo v.v ... không gian còn lại trên trang. Làm thế nào điều này có thể được thực hiện trong CSS?

Answer 1

CSS:

#right-column{ 
width:300px; 
float:right; 
} 

#other-column{ 
float:left; 
width:100%; 
padding-right:20px; /*to prevent text overlap as suggested in the comment*/ 
} 

Trong HTML:

<div id='right-column'> 
<!-- ads here --> 
</div> 
<div id='other-column'> 
<!-- content here --> 
</div> 

Answer 2

Bạn cũng có thể muốn kiểm tra YUI: CSS Grid Builder. Nó là một giao diện web đơn giản, nơi bạn chỉ định bố trí lưới bạn đang tìm kiếm, và chúng sẽ cung cấp cho bạn mã html mà bạn có thể sử dụng kết hợp với YUI Grids CSS framework để có được bố cục mong muốn của bạn. Một điều thú vị về khung CSS của YUI Grids là nó có good cross browser support giúp bạn tiết kiệm thời gian làm việc trên các trình duyệt khác nhau. Bạn cũng có thể đảo ngược kỹ sư mã mà bạn được cung cấp từ trình tạo lưới để có được một số ý tưởng về cách bạn có thể tự mình làm điều đó. Các cài đặt bạn sẽ muốn sử dụng với YUI: CSS Lưới Builder để có được bố trí mong muốn của bạn là như sau:

1. Body Kích thước: 100%
2. Body Cột: Sidebar ngay 300px

Answer 3

đây là công cụ để generate fixed liquid columns để đặt quảng cáo adsense.

Answer 4

Một giải pháp mà tôi đã tìm thấy cho điều này là để thả cột bên phải sang bên phải và cho cột bên trái một vị trí tuyệt đối với bên trái: 0 và bên phải: 300px. Điều này sẽ làm cho nó chất lỏng như thể bạn đã cho nó một chiều rộng: 80%, nhưng nó sẽ tương đối so với container mẹ theo một cách khác.

Dưới đây là một ví dụ: http://jsfiddle.net/tkane2000/dp9GZ/

Một vấn đề mà bạn có thể tìm thấy với điều này là vì nó là tuyệt đối, nó sẽ không tự nhiên đẩy xuống các yếu tố dưới nó.

Một giải pháp có thể khác là đặt cột bên trái chiều rộng: 100% padding-right: 300px;

và cột bên phải (chiều rộng cố định): vị trí: tuyệt đối: hàng đầu: 0; ngay: 0;

Bạn có thể cần phải đặt kích thước hộp: hộp biên giới ở cột bên trái.

Đây cũng là một số hạn chế. Một ý nghĩ đến, đó là nếu bạn muốn cột bên trái có một đường biên phải để tách biệt nhau, đường viền sẽ nằm ở phía bên phải của cột bên phải.

Answer 5

CSS:

.column-right { 
    float: left; 
    width: 100%; 
    height: 200px; 
    background-color: red; 
} 

.column-right .column-content { 
    margin-left: 250px; 
} 

.column-left { 
    float: left; 
    margin-left: -100%; 
    width: 250px; 
    height: 200px; 
    background-color: green; 
} 

HTML:

<div class="column-right"> 
    <div class="column-content"> 
     <strong>Right Column:</strong><em>Liquid</em> 
    </div> 
</div> 
<div class="column-left"> 
    <strong>Left Column:</strong><em>250px</em> 
</div>