html - div float 时删除垂直空白空间

Question

这是我的错，我正在尝试重新提出问题。

我有这样的代码:

<style>
    div { 
        float: left; width: 150px; padding: 10px; 
        margin: 10px; color: #fff;
    }
</style>
<div style="background: #c33">
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div style="background: #3c3;">
    b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
    b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</div>
<div style="background: #33c;">
    c<br>c<br>c<br>c<br>c<br>c<br>c
</div>
<div style="background: #399;">
    d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
</div>
<div style="background: #939;">
    e<br>e
</div>
<div style="background: #993;">
    f<br>f<br>f<br>f<br>f
</div>
<!--
      ... and so on ...
-->

当我的访问者的屏幕有足够的宽度时，它可以正常工作。

当屏幕变小时，一开始它仍然可以正常工作。

但好景不长，不断缩小屏幕尺寸时，显示成这样。

c(蓝色)和e(紫色)之间出现了一些空格。

然后是 a(红色的) 和 f(黄色的)。

当缩小到两列时，a c 和e 是完全分开的。

所以，我的问题是，我的每个 block 都有一定的(固定的)宽度，不确定的(流动的)高度，这个“ block 区域”或说“这些 block 的父节点”或容器没有最大宽度.

我可以使用纯 css 方式删除这些不必要的空格吗？

希望这次我解释清楚了，感谢您阅读我的帖子。

Answer 1

你可以尝试只向左浮动两个，向右浮动另一个:

.aaa,
.bbb,
.ccc {
  width: 200px;
  padding: 10px;
  margin: 20px;
  color: #fff;
}

.bbb {
  float: right;
}

.aaa,
.ccc {
  float: left;
}

<div class="aaa" style="background: #933">
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div class="bbb" style="background: #393">
  b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br> b
  <br>b<br>b<br>b<br>bbr>b<br>b<br>b<br>b<br>b
</div>
<div class="ccc" style="background: #339">
  c<br>c<br>c<br>c<br>c<br>c
</div>