2012-07-10 46 views
10

Tôi có hai cột và muốn xếp các div có chiều cao khác nhau theo thứ tự xuất hiện.các div chiều cao khác nhau nổi trong hai cột

Các div được tạo động.

Nếu tôi chỉ thả nổi chúng trên 50% chiều rộng, chẳng mấy chốc tôi đến trong tình huống div # 4 cao gấp 5 lần số div đến. Sau đó, div tiếp theo được căn chỉnh hàng đầu với phần dưới cùng của div trước đó.

tôi cần phải phù hợp với các div con trong container sẽ kết hợp chính xác như thế này:

----- ------- 
    1  2 
----- 
    3 ------- 
----- 4 
    5 
----- 
    6 
----- 
    7 ------- 
----- 8 
    9 

----- 
10 ------- 
     11 
     ------- 
     ------- 
----- 

Dưới đây là đoạn mã những gì tôi đã làm:

<style> 
    .box {background:#20abff; color:#fff; width:50%; margin: 5px;} 
    .left {float:left;} 
    .right {float:right;} 
    .container {width:205px;} 
</style> 
    <body> 
     <div class="container"> 
      <div class="box left" style="height:60px;">1</div> 
      <div class="box left" style="height:80px;">2</div> 
      <div class="box left" style="height:30px;">3</div> 
      <div class="box left" style="height:70px;">4</div> 
      <div class="box left" style="height:60px;">5</div> 
      <div class="box left" style="height:20px;">6</div> 
      <div class="box left" style="height:40px;">7</div> 
      <div class="box left" style="height:90px;">8</div> 
      <div class="box left" style="height:30px;">9</div> 
     </div> 
    </body> 

và nó trông giống như

này

http://dl.dropbox.com/u/142343/divstack.html

đánh giá cao sự trợ giúp

+0

Bạn có thể đăng html và css hiện tại của mình không? – Erica

+0

[Bạn đã thử gì?] (Http://mattgemmell.com/2008/12/08/what-have-you-tried/) – avall

+0

Tôi thấy những gì bạn đang cố gắng làm .. vấn đề là gì? – Oofpez

Trả lời

12

Bạn sẽ phải làm điều này với JavaScript. Nếu bạn đang sử dụng jQuery, có một plugin tuyệt vời được gọi là Masonry. Ngoài ra còn có non jQuery version.

Để trích dẫn README on GitHub:

HTĐ chính là một kịch bản bố trí lưới năng động. Hãy nghĩ về nó như là một flip-side của CSS float. Trong khi nổi sắp xếp các phần tử theo chiều ngang thì theo chiều dọc, Masonry sắp xếp các phần tử theo chiều dọc, định vị từng phần tử ở vị trí mở tiếp theo trong lưới. Kết quả thu nhỏ khoảng cách khoảng trống theo chiều dọc giữa các phần tử có chiều cao khác nhau, giống như một viên đá phiến phù hợp trên tường.

single column layout có lẽ là những gì bạn đang tìm kiếm.


Nếu bạn không để quên các trình duyệt cũ trong bụi, có CSS3 column properties. Có một ví dụ here, on Quirksmode và một số tài liệu trên MDN.

+0

+1 Plugin Masonry là cách để thực hiện bố cục này. –

+0

Nhưng nề không hoạt động trong IE ... bất kỳ giải pháp –

+0

@Rama Bạn thậm chí có thử nó trong IE không? [Trang demo] (http://masonry.desandro.com/) hoạt động hoàn hảo trong IE10, 8 và 7. – Bojangles

2

Sử dụng 2 div làm vùng chứa, đặt cả hai cột trong div vùng chứa này, do đó, hãy thả div này sang trái và sang phải .... nó có thể hoạt động ... Bố cục lưới cũng sẽ hoạt động.

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