CSS float không gian trống

Question

Tôi có nhiều div trong một gói, chúng có chiều cao khác nhau. Tôi muốn trôi nổi. 2 Div có thể phù hợp trong một hàng. Nhưng vì mỗi div có chiều cao khác nhau, có rất nhiều không gian lẻ còn lại trong hàng tiếp theo. Tôi có thể loại bỏ không gian và di chuyển của div lên?

Hãy nhìn vào hình ảnh:

Đây là mã:

<div class="wrap"> 
    <div class="box1">Box1 with less height.</div> 
    <div class="box2">Box2 with more height.</div> 
    <div class="box3">Box3 with whatever height.</div> 
</div> 

CSS:

.wrap{ 
    width:410px; 
    border:1px solid red; 
    overflow:hidden; 
} 

.box1{ 
    width:200px; 
    height:50px; 
    float:left; 
    border:1px solid green; 
} 

.box2{ 
    width:200px; 
    height:150px; 
    float:left; 
    border:1px solid blue; 
} 

.box3{ 
    width:200px; 
    height:250px; 
    float:left; 
    border:1px solid blue; 
} 

JSFiddle: http://jsfiddle.net/NsH5M/

PS. Chiều cao div không cố định. Đây chỉ là ví dụ. Chỉnh sửa: Rất tiếc, tôi nên đề cập rằng không thể chỉnh sửa đánh dấu.

Answer 1

Cố gắng sử dụng masonry. Điều này sẽ giúp bạn sắp xếp div của bạn mà không có không gian trống.

Đó là cách nó được sử dụng như một ví dụ về mã của bạn: jsfiddle

HTML:

<div class="wrap"> 
    <div class="box box1">Box1 with less height.</div> 
    <div class="box box2">Box2 with more height.</div> 
    <div class="box box3">Box3 with whatever height.</div> 
</div> 

JavaScript:

$(function(){ 
    $('.wrap').masonry({ 
     // options 
    itemSelector : '.box' 
    }); 
});​ 
​ 

Và CSS:

.wrap{ 
    width:410px; 
    border:1px solid red; 
    overflow:hidden; 

} 

.box{ 
    float: left; 
    width: 200px; 
} 

.box1{ 
    height:50px; 
    border:1px solid green; 
} 

.box2{ 
    height:150px; 
    border:1px solid blue; 
} 

.box3{ 
    height:250px; 
    border:1px solid blue; 
} 

Answer 2

Tôi không chắc chắn nếu nó sẽ làm việc nhưng bạn có thể thử hộp 1 và hộp 3 nổi ở bên trái và hộp 2 bên phải

EDIT: làm việc trong firefox http://jsfiddle.net/NsH5M/1/

Answer 3

cho float:right-.box2 Viết như thế này:

.box2{ 
    width:200px; 
    height:150px; 
    float:right; 
    border:1px solid blue; 
} 

Kiểm tra này http://jsfiddle.net/NsH5M/2/

Answer 4

nếu bạn có thể chỉnh sửa đánh dấu của bạn, bạn có thể quấn box1 và box3 trong một hộp đựng có nổi:

http://jsfiddle.net/NsH5M/3/

bạn cũng có thể float: right box3 của bạn nhưng điều đó sẽ hơi thay đổi kết quả (sẽ có một khoảng cách giữa các hộp nổi ở bên trái và một ở bên phải - có thể không phải là một vấn đề tùy thuộc vào thiết kế của bạn.

Answer 5

Chỉ cần sử dụng phao: phù hợp với các yếu tố bạn muốn ở bên phải. Trong trường hợp này:

.box2{ 
width:200px; 
height:150px; 
float:right; 
border:1px solid blue; 
} 

jsfiddle của bạn được cập nhật here

Answer 6

Isotope có thể làm điều này cho bạn, sử dụng cách bố trí nề.

Answer 7

Giải pháp đúng ... Câu hỏi quan trọng là "bạn có chỉ 2 cột không?". Và kể từ đây nó là trường hợp, giải pháp đúng sẽ là:

(đây là một mã jQuery nhưng rõ ràng là nó có thể được thực hiện nếu vài lời hơn trong tinh khiết JS)

Nó lớp trường hợp của tôi "Add- thông tin "được gán cho tất cả các phần tử trong vùng chứa. Những gì bạn đang làm chỉ đơn giản là kiểm tra xem phần tử tiếp theo có nên được thả sang trái hay phải không. Không sử dụng các tập lệnh phức tạp cho mọi thứ. Một nửa số người truy cập web từ điện thoại di động và lượng dữ liệu di động bị giới hạn.

function contactFloats() { 
    var leftCounter = 0; 
    var rightCounter = 0; 
    $('.add-info').each(function(){ 
      if(leftCounter <= rightCounter){ 
       $(this).css('float', 'left'); 
       leftCounter += $(this).outerHeight(); 
      }else{ 
       $(this).css('float', 'right'); 
       rightCounter += $(this).outerHeight(); 
      } 
    }); 
}