我有一堆内容灵活的红色方块。
<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;父母每次调整屏幕大小。
提前致谢,
大卫
答案 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链接中看到它。
您还需要清除右侧。