使不同高度的div填补新行上的垂直空间 [英] make divs of different heights fill vertical space on new line

问题描述

我试图做一个应该看起来像这样的网格

它看起来应该是什么样子

但是它呈现为这样

实际看起来像

这是我的HTML代码

 < div style =display：flex; flex-wrap：wrap> ; 
< div class =itemstyle =height：400px; background-color：#ddd>< / div> 
< div class =itemstyle =height：200px; background-color：＃000>< / div> 
< div class =itemstyle =height：200px; background-color：#ececec>< / div> 
< div class =itemstyle =height：700px; background-color：＃DC0F0F>< / div> 
< div class =itemstyle =height：400px; background-color：＃B429A2>< / div> 
< div class =itemstyle =height：200px; background-color：＃009EBA>< / div> 
< div class =itemstyle =height：200px; background-color：＃694141>< / div> 
< div class =itemstyle =height：400px; background-color：＃29B436>< / div> 
< div class =itemstyle =height：200px; background-color：＃74B2BD>< / div> 
< div class =itemstyle =height：700px; background-color：＃DCDA0F>< / div> 
< / div> 
  

item类的静态宽度为33％。

我明白在JS中做这样的事情是很有可能的。但是我正在寻找一个纯粹的CSS解决方案。

谢谢 解决方案

你最好的选择是使用 砌体 ，但如果你坚持只有CSS解决方案，那么你应该使用 columns
这是 演示

.wrapper {
-webkit-column-count：3; / * Chrome，Safari，Opera * /
-moz-column-count：3; / * Firefox * /
column-count：3;
-webkit-column-gap：0; / * Chrome，Safari，Opera * /
-moz-column-gap：0; / * Firefox * /
column-gap：0;
width：100vw;
}

.wrapper div {
display：inline-block;
宽度：100％;
vertical-align：top;

$ b

 < div class =wrapper> 
< div class =itemstyle =height：400px; background-color：#ddd>< / div> 
< div class =itemstyle =height：200px; background-color：＃000>< / div> 
< div class =itemstyle =height：200px; background-color：#ececec>< / div> 
< div class =itemstyle =height：700px; background-color：＃DC0F0F>< / div> 
< div class =itemstyle =height：400px; background-color：＃B429A2>< / div> 
< div class =itemstyle =height：200px; background-color：＃009EBA>< / div> 
< div class =itemstyle =height：200px; background-color：＃694141>< / div> 
< div class =itemstyle =height：400px; background-color：＃29B436>< / div> 
< div class =itemstyle =height：200px; background-color：＃74B2BD>< / div> 
< div class =itemstyle =height：700px; background-color：＃DCDA0F>< / div> 
< / div> 
  

I'm trying to make a grid which should look something like this

what it should look like

but it renders as this

what it actually looks like

here is my HTML code

<div style="display: flex; flex-wrap: wrap">
    <div class="item" style="height: 400px; background-color: #ddd"></div>
    <div class="item" style="height: 200px; background-color: #000"></div>
    <div class="item" style="height: 200px; background-color: #ececec"></div>
    <div class="item" style="height: 700px; background-color: #DC0F0F"></div>
    <div class="item" style="height: 400px; background-color: #B429A2"></div>
    <div class="item" style="height: 200px; background-color: #009EBA"></div>
    <div class="item" style="height: 200px; background-color: #694141"></div>
    <div class="item" style="height: 400px; background-color: #29B436"></div>
    <div class="item" style="height: 200px; background-color: #74B2BD"></div>
    <div class="item" style="height: 700px; background-color: #DCDA0F"></div>
</div>

The item class has a static width: 33%.

I understand that doing something like this in JS is quite possible. But I am looking for a pure CSS solution.

Thanks

解决方案

Your best option is to use Masonry but if you insist on CSS only solution then you should use columns Here is Demo

.wrapper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
  column-count: 3;
 -webkit-column-gap: 0; /* Chrome, Safari, Opera */
 -moz-column-gap: 0; /* Firefox */
  column-gap: 0;
  width: 100vw;
}

.wrapper div {
  display: inline-block;
  width: 100%;
  vertical-align: top;

}

<div class="wrapper">
    <div class="item" style="height: 400px; background-color: #ddd"></div>
    <div class="item" style="height: 200px; background-color: #000"></div>
    <div class="item" style="height: 200px; background-color: #ececec"></div>
    <div class="item" style="height: 700px; background-color: #DC0F0F"></div>
    <div class="item" style="height: 400px; background-color: #B429A2"></div>
    <div class="item" style="height: 200px; background-color: #009EBA"></div>
    <div class="item" style="height: 200px; background-color: #694141"></div>
    <div class="item" style="height: 400px; background-color: #29B436"></div>
    <div class="item" style="height: 200px; background-color: #74B2BD"></div>
    <div class="item" style="height: 700px; background-color: #DCDA0F"></div>
</div>

这篇关于使不同高度的div填补新行上的垂直空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！