html - 用元素填充空白

Question

我有模块添加图像，所有图像都缩放到 25% 宽度并且有 float:left。当我在中间添加矩形图像时，有空白区域。这是我图像中的矩形 (2)，我想将方形 (5) 转到空白处。

你能告诉我如何做到这一点吗？

Answer 1

如果您使用包装器 div 并使其完全 float 到您希望其中的元素达到的宽度，则可以将其填满。

.small {
  width:25%; 
  float:left; 
  height:50px; 
  background:#f0f;
  box-shadow:0px 0px 1px 1px #fff, 0px 0px 0px 10px rgba(255, 255, 255, 1);
  margin-bottom:10px;
  }
  .inWrapper{
float:none;
width:100%
  }
  
.height {height:110px}
.long {width:50%}
.smallwrapper{
  display: inline-block;
  float:left;
  width:25%
}

<div id="grid">
<div class="smallwrapper">
<div class="small inWrapper">
1
</div>
<div class="small inWrapper">
NEW
</div>
</div>
<div class="small height">
2
</div>
<div class="small">
3
</div>
<div class="small">
4
</div>
<div class="small">
5
</div>
<div class="small">
6
</div>
<div class="small long">
7
</div>
<div class="small long">
8
</div>
<div class="small">
9
</div>
</div>

注意:这看起来不错，因为您已经定义了高度，使较小的高度恰好是较大高度的两倍(带边距)。