Html div浮动时删除垂直空白

这是我的错，我正试图重新问这个问题

我有一些这样的代码：

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

div{
浮动：左；宽度：150px；填充：10px；
边距：10px；颜色：#fff；
}
a
a
a
a
a
a
a
a
a
b
b
b
b
b
b
b
b
b
b
b

b
b
b
b
b
b
b
b
b
b
b
b
c
c
c
c
c
c
c
c
d
d
d
d
d
d
d
d
d
d
d

e
e
f
f
f
f
f
f

当我的访客的屏幕有足够的宽度时，它就可以像这样工作了

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

但好时光不会持续太久，当屏幕尺寸不断缩小时，它会这样显示

在

c（蓝色的）

和

e（紫色的）

之间出现了一些空格

然后

a（红色的）

和

f（黄色的）

当收缩到两列时，

a

c

和

e

完全分开

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

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

---

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

网格，flex。。。甚至简单地使用浮动和清除：

div{
宽度：200px；填充：10px；
边距：20px；颜色：#fff；
}
a
a
a
a
a
a
a
a
a
b
b
b
b
b
b
b
b
b
b
b

b
b
b
b
b
b
b
b
b
b
b
b
c
c
c
c
c
c
c

在某种程度上，如果您使用左浮动和右浮动，如下图所示，并在其周围放置一个包装器，以使右浮动的元素不会向右移动太远，您可以做到这一点：

div{
宽度：200px；
填充：10px；
利润率：20px；
颜色：#fff；
}
.a{
浮动：左；
}
.b{
浮动：对；
}
.包装纸{
宽度：520px；）

a
a
a
a
a
a
a
a
a
b
b
b
b
b
b
b
b
b
b
b
b
b

b
b
b
bbr>b
b
b
b
b
b
b
c
c
c
c
c
c
c

您可以尝试只左浮动两个，右浮动另一个：

.aaa，
.bbb，
.ccc{
宽度：200px；
填充：10px；
利润率：20px；
颜色：#fff；
}
.bbb{
浮动：对；
}
.aaa，
.ccc{
浮动：左；
}

a
a
a
a
a
a
a
a
a
b
b
b
b
b
b
b
b
b
b
b
b
b

b
b
b
bbr>b
b
b
b
b
b
b
c
c
c
c
c
c
c

正如其他人所说，有很多方法可以做到这一点，但我会使用flexbox

只需将左侧的两个框包装在容器div中，并在该容器上使用display:flex，然后将flex direction属性设置为column，它们应该堆叠在一起

---

这里有一个很好的网站来学习基本知识-

奇怪的是，你能得到的最接近的是使用该死的CSS列。。 是的，没错，我刚才说的是“CSS专栏”

使用divs width作为列宽声明一个自动列布局，并确保没有div将以

break-inside:avoid；

换行到多个列中，这样可以非常接近

  body {
    columns: 150px;
    column-gap: 2em;
  }
  div { 
    break-inside: avoid;
  }

---

是的，我知道。我只是说了列。我想这永远不会是一个答案。

有很多方法。CSS提供列、网格布局、flex box布局等。谢谢你的回答，我已经尝试了很多方法，包括

flex

和

column count

，但是在我的情况下，没有一种方法可以工作，因为我的列号不固定。这取决于访问者的屏幕分辨率。请将您的问题包括您尝试过的内容以及为什么它不适合您。如果您不提供限制，您只会得到一堆您无法使用的答案。请参阅。我会尝试，谢谢您的帮助。@MikeMcCaughan我已经编辑了我的帖子，明白了吗？谢谢您的回答。我想这样做ne是当访问者的屏幕足够大时，一行显示四个五到六个区块，当他们缩小屏幕尺寸时，区块分成两行，如果有六个区块，则显示五列两行。当他们继续缩小屏幕时，页面将变成四列两行，三列两行，然后是两列三行。我解释清楚了吗？@NotUser9123好吧，这不是你要问的……请编辑并更具体一些，包括“细节”，如果项目的高度是固定的或流动的，如果项目的宽度/高度应该扩大/缩小，那么他们应该保持某种秩序，如果出于任何原因，你想避免媒体查询，等等。编辑我的问题还是删除它然后再问？谢谢你的建议。我编辑了我的问题，这次我的问题清楚了吗？@NotUser9123现在更清楚了。我也会编辑anser。您需要将元素保持在特定的顺序吗？