这是我的错,我正在尝试重新提出问题。
我有这样的代码:
<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 方式删除这些不必要的空格吗?
希望这次我解释清楚了,感谢您阅读我的帖子。
最佳答案
你可以尝试只向左浮动两个,向右浮动另一个:
.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>
关于html - div float 时删除垂直空白空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48614429/