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(the blue one)和e(the purple one)之间出现了一些空格。

然后a(the red one)和f(the yellow one)。

缩小为2列时，a c和e完全分开。

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

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

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

Answer 1

您可能会尝试只将两个浮动，并向右浮动另一个：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

Grid，flex ...甚至只是使用浮动和清除：

＆＃13;

<style>
    div { 
        width: 200px; padding: 10px; 
        margin: 20px; color: #fff; 
    }
</style>
<div style="background: #933; float: left;">
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div style="background: #393; float:right;">
    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: #339; clear:left;">
    c<br>c<br>c<br>c<br>c<br>c
</div>

＆＃13;

Answer 3

在某种程度上，你可以这样做，如果你使用左和右浮动，如下所示，并在它周围放一个包装，让右浮动元素不会走得太远：

＆＃13;

div {
  width: 200px;
  padding: 10px;
  margin: 20px;
  color: #fff;
}

.a {
  float: left;
}

.b {
  float: right;
}
.wrapper {
width: 520px;)

＆＃13;

<div class="wrapper">
  <div style="background: #933" class="a">
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
  </div>
  <div style="background: #393" class="b">
    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 style="background: #339" class="a">
    c<br>c<br>c<br>c<br>c<br>c
  </div>
</div>

＆＃13;

Answer 4

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

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

这是一个很棒的网站，可以提供基础知识 - http://flexboxfroggy.com/

Answer 5

奇怪的是，你能得到的最接近的是使用该死的CSS列。是的，没错。我刚刚说过＆＃34; CSS Columns＆＃34;

使用div宽度作为列宽来声明自动列布局，并确保没有div将使用break-inside: avoid;包裹到多个列中，您可以非常接近。

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

https://jsfiddle.net/p0yLs5sh/1/

是的，我知道。我只是说了专栏。认为永远不会是一个答案。

div浮动时删除垂直空白区域

5 个答案: