由元素填充空白空间

Question

我有模块添加图像，所有图像缩放到25％宽度并且浮动：向左。当我在中间添加矩形图像时，有空的空间。这是我图像中的矩形（2），我想方形（5）去空白区域。

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

Answer 1

如果你使用一个包装div并让它完全向左浮动你希望它里面的元素的宽度，你可以填充它。

.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>

注意：这看起来不错，因为你已经定义了你的身高，使得较小的身高恰好是较​​大身高的两倍（有边距）。