使用float时,CSS会消除额外的间距:left;

时间:2017-02-24 17:29:31

标签: css css-float

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

<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;父母每次调整屏幕大小。

提前致谢,

大卫

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

不使用任何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链接中看到它。

您还需要清除右侧。