CSS 在使用 float :left; 时摆脱额外的间距

Question

我有一堆内容灵活的红色方 block 。

<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>

我希望如果屏幕足够宽，而不是逐 block 显示，我会并排放置两个。

我能够做到这一点，但是当我这样做时，如果两个元素具有不同的高度，就会有额外的间距。

查看我的 jsFiddle:https://jsfiddle.net/78k9vvf6/

.block {
  width: 40%;
  margin-right: 10%;
  margin-top: 10px;
  margin-bottom: 10px;
  background: red;
  color: white;
  float: left;
}

有没有人知道如何摆脱这个额外的间距？

我不想将它们放入单独的父元素中，因为如果我那样做，每次调整屏幕大小时我都必须更改元素的父元素。

提前致谢

大卫

Answer 1

您可以让元素占据所有的垂直空间，方法是让父级 display: flex; flex-wrap: wrap;.

如果您希望元素向上移动以填充创建的垂直间隙，仅使用 CSS 没有简单的方法可以做到这一点。您需要使用类似 masonry 的库.

.parent {
  display: flex;
  flex-wrap: wrap;
}
.block {
  width: 40%;
  margin-right: 10%;
  margin-top: 10px;
  margin-bottom: 10px;
  background: red;
  color: white;
}

<div class="parent">
<div class="block">
    hello.
    <br>stackoverflow.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.<br>
    world.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
</div>

*edit - 既然你说你想让元素向上移动，这里有一个砌体演示。

$('.parent').masonry();

.block {
  width: 40%;
  margin-right: 10%;
  margin-top: 10px;
  margin-bottom: 10px;
  background: red;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="parent">
<div class="block">
    hello.
    <br>stackoverflow.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.<br>
    world.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
</div>