1. 首页
  2. 问答
  3. 使用float时，CSS摆脱了额外的空白：left;

使用float时，CSS摆脱了额外的空白：left;

2017-02-24 169 views
0

我有一堆有灵活内容的红色正方形。使用float时，CSS摆脱了额外的空白：left;

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

有谁知道反正摆脱这种额外的间距？

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

由于提前，

大卫

来源

2017-02-24 David Callanan

+0

你是什么意思摆脱额外的间距？你想用背景色填充空间吗？或者您是否希望项目向上移动，以便列中的文本之间没有垂直间距？ –

+0

我想要项目上移。 –

+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/[email protected]/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>

来源

2017-02-24 17:33:17

+1

感谢您的帮助！第二个选项是我想要的，但我不想使用jQuery或任何库。我想通过使用'float：left;'和'float：right'来解决这个问题。 –

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链接中看到。

此外，您还需要清除权利。

来源

2017-03-23 17:17:13

相关问题

 相关问题