CSS浮动空格 [英] CSS float empty spaces

问题描述

我有多个div在一个wrap，他们有不同的高度。我想浮动左边。 2个Div可以排成一行。但是由于每个div具有不同的高度，在下一行中有很多奇怪的空间。

请看下面的图片：

这里是代码：

 < div class =wrap> 
< div class =box1> Box1高度较小。< / div> 
< div class =box2>具有更多高度的Box2。< / div> 
< div class =box3> Box3带有任何高度。< / 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 。 div高度不固定。这只是例子。

/i.stack.imgur.com/5Hd0u.pngalt =enter image description here>

解决方案

尝试使用石工。这将帮助你安排你的div没有空格。

这是如何使用它作为你的代码的例子： jsfiddle

HTML：

 < div class =wrap> 
< div class =box box1> Box1高度较小。< / div> 
< div class =box box2>具有更多高度的Box2。< / div> 
< div class =box box3> Box3任何高度。< / div> 
< / div> 
  

JavaScript：

  $（function（）{
 $（'。wrap'）。masonry（{
 // options 
 itemSelector：'.box'
}）; 
}）; 
 
  

和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; 
} 
  

I have multiple divs in a wrap, they have different height. I'd like to float left. 2 Divs can fit in a row. But since each of the div has different height, there's pretty much odd space left in next row. Can I remove the space and move the div's up?

Please look at the image:

Here's code:

<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. The div heights are not fixed. This is just for example. Edit: Sorry, I should have mentioned that its not possible to edit markup.

解决方案

Try to use masonry. This should help you to arrange your div without empty space.

That's how it is used as an example of your code: 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'
  });
});​
​

And 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;
}

这篇关于CSS浮动空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！