3 cột, giữa một cột có chiều rộng linh hoạt

Question

Tôi muốn có bố cục bao gồm ba div liền kề. Các div bên có chiều rộng tĩnh (nó có thể thay đổi qua javascript) và div trung tâm lấp đầy một vùng còn lại. Khi kích thước của div đầu tiên thay đổi nó chỉ ảnh hưởng đến trung tâm. Nó tương tự như bảng (với kết xuất động) bao gồm ba cột.

Ok, nhưng vấn đề ở đâu. Vấn đề là nếu tôi đặt div thả nổi bên trái vào cột đầu tiên và chặn div trong cột thứ hai và thứ ba, khối div hoạt động theo cách lạ. Chúng được hiển thị trong cột của chúng bên dưới div nổi từ cột đầu tiên.

Ví dụ. Trong cột đầu tiên và thứ hai tôi có div nổi và khối div trong cột thứ ba. Khối div được dịch chuyển xuống xung quanh chiều cao của các div nổi. Div trong cột trung tâm không được dịch chuyển ở vị trí y của mình mà chỉ có thuộc tính float bên trái.

Tôi muốn mỗi div trong ba bố cục độc lập với nhau. Tôi không có ý tưởng tại sao các phần tử trong cột thứ ba nổi div trong hai cột đầu tiên (với thuộc tính float).

Mã sản phẩm:

<div style="margin: auto; display: table; width: 260px;"> 
     <div style="display: table-row;"> 
      <div style="display: table-cell; width: 100px;"> 

       <div style="float: left; width: 40px; height: 50px;">COL1</div> 

      </div> 
      <div style="display: table-cell;"> 

       <div style="float: left; height: 50px; width: 40px;">COL2</div> 

      </div style="display: table-cell; width: 100px;"> 
      <div class="sideContainer"> 

       <div>COL3</div> 

      </div> 
     </div> 
</div> 

và kết quả: result

Làm thế nào để khắc phục điều đó. Làm thế nào để làm cho tất cả các bố trí divs (cột) được độc lập với nhau. Bất kỳ ý tưởng?

Answer 1

Bạn có thể làm điều đó bằng cách thả nổi col1 và col3 sang trái và phải, với chiều rộng cố định.

Sau đó, thêm lề trái và phải sang col2 bằng chiều rộng của col1 và col3.

Điều này cung cấp cho bạn ba cột; col1 và col3 có chiều rộng cố định và col2 điền chiều rộng có sẵn:

(hộp nội dung col2 của màu xanh lam, và lợi nhuận của mình trong màu vàng)

<div class='container'> 
    <div class='right'> 
     col3 
    </div> 
    <div class='left'> 
     col1 
    </div> 
    <div class='middle'> 
     col2 
    </div> 
</div> 



.container { 
    overflow: hidden; 
} 
.right { 
    float: right; 
    width: 100px; 
} 
.left { 
    float: left; 
    width: 100px; 
} 
.middle { 
    margin: 0 100px; 
} 

Hãy thử nó ở đây: http://jsfiddle.net/22YBU/

BTW nếu bạn cần hiển thị: bảng, hiển thị: hàng bảng và hiển thị: bảng ô, sử dụng bảng ;-)