CSS浮动空白空间

14 浏览
0 Comments

CSS浮动空白空间

我有多个div在一个包裹中，它们的高度不同。我想让它们左浮动。每行可以容纳2个div。但由于每个div的高度不同，在下一行中会留下很多空白空间。我可以移除空间并将div上移吗？

请看图：

下面是代码：

    Box1高度较小。
    Box2高度较大。
    Box3高度不确定。

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/

附注：div的高度不是固定的。这只是一个例子。

编辑：抱歉，我应该提到不能编辑标记。

enter image description here

0

3 答案

0 Comments

CSS中的浮动（float）属性可以使元素脱离文档流，并且向左或向右浮动，使其他元素能够环绕在其周围。然而，在使用浮动属性时，可能会出现一些空白间隙的问题。

出现这个问题的原因是，当一个元素设置为浮动后，其周围的元素会重新排列，但是浮动元素的尺寸仍然会占据原来的位置，导致周围的元素无法填充这些空白空间。

解决这个问题的方法是使用清除浮动（clear float）的技术。清除浮动可以用来清除浮动元素对其他元素造成的影响，使后面的元素不再环绕浮动元素。

常见的清除浮动的方法有以下几种：

1. 使用空的块级元素清除浮动：

在浮动元素后面添加一个空的块级元素，并为其设置`clear:both`属性，可以清除浮动元素对后面元素的影响。

2. 使用伪元素清除浮动：

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

在包含浮动元素的父元素上添加一个类名（例如`clearfix`），并使用伪元素`::after`来清除浮动。

3. 使用overflow属性清除浮动：

.parent {
    overflow: auto;
}

在包含浮动元素的父元素上设置`overflow: auto`属性，可以触发父元素的BFC（块级格式化上下文），从而清除浮动。

通过使用上述方法，可以解决CSS浮动属性产生的空白间隙问题，使页面布局更加合理和美观。

0
0 Comments

问题的出现原因是使用CSS的float属性对元素进行浮动布局时，可能会出现空白间隙的情况。这是因为浮动元素脱离了正常的文档流，导致周围的元素无法正确地布局。

解决方法是使用clear属性清除浮动。可以在浮动元素的父容器中添加一个空元素，并为其设置clear:both属性，使其在浮动元素的下方进行换行。这样可以确保浮动元素后的元素能够正确地布局。

以下是解决方法的代码示例：


  

    
  

  

    
  

  
 
  

    
  





.box1 {
  float: left;
}
.box2 {
  float: right;
}
.clear {
  clear: both;
}
.box3 {
  /* 其他样式 */
}

通过在浮动元素后添加一个clear元素，并为其设置clear:both属性，可以清除浮动并确保后续元素正确布局。这样就可以解决CSS浮动导致的空白间隙问题。

0
0 Comments

CSS float empty spaces问题的出现原因是由于使用CSS float属性时，浮动元素之间可能会出现空白间隙。解决这个问题的方法是使用masonry插件来排列div元素，以避免空白空间的出现。

在解决该问题的过程中，可以参考以下代码示例：

HTML部分：


    
Box1 with less height.

    
Box2 with more height.

    
Box3 with whatever height.

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

以上代码通过使用masonry插件来实现div元素的排列，避免了浮动元素之间的空白空间问题。这样，在浏览器中显示时，div元素会自动调整位置，不再出现空白间隙。

可以通过点击以下链接查看示例代码的效果：jsfiddle.net/NsH5M/123。

0