使用float时，CSS会消除额外的间距：left;

Question

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

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

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

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

请参阅我的jsFiddle：https://jsfiddle.net/78k9vvf6/

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

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

我不想把它们放在单独的父元素中，因为如果我这样做，我将不得不改变元素＆＃39;父母每次调整屏幕大小。

提前致谢，

大卫

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>

*编辑 - 因为你说你希望物品向上移动，所以这是一个带砖石的演示。

$('.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>

Answer 2

不使用任何JavaScript或库的另一种方法是使用float:left;和float:right;。

通过这样做，他们会向上移动，因为向右和向左浮动是相互独立的。

例如，当向右浮动时，它就好像左边没有元素一样。

左侧的元素使用float: left'，右侧的元素使用float: right;。

这是一个JSFiddle：https://jsfiddle.net/78k9vvf6/2/

您可能需要更新父容器的宽度，以使元素仍位于正确的区域。

要将每秒项目定位到左侧而不是右侧，我使用了css nth-child。见下文：

.block {
    ...
    float: left;
}

.block:nth-child(even) { /* even -> every second block */
    float: right;
}

我知道这似乎没有意义，你可以只有两个容器 - 一个用于右边，一个用于左边 - 并将它们两个浮动到左边，但它必须以这种方式完成的原因是因为当屏幕太小时，我需要他们能够互相攻击。为此，我使用了媒体查询，当屏幕变小时，我将每个元素浮动到左侧：

@media screen and (max-width: X px) {
    .block { float: left; }
}

与我所知道的masonry解决方案相比，此解决方案的唯一缺点是，如果运气不好，那么右边的所有项目都比左边的项目更高，那么在左下角有很多额外的空间。您可以在上面给出的JSFiddle链接中看到它。

您还需要清除右侧。