我正在创建一个动态网站,其中有一个父 div 和子 div(它们的宽度可变)在父 div 中并试图做到这一点: 当创建一个新的 div 时,它被向下推直到它的父高度被填充然后开始一个新的列,例如:
图像:
<style>
.parent {
height: 800px;
width: 100%;
overflow-y: hidden;
border: 1px solid black;
}
.child1 {
background-color: blue;
height: 150px;
width: 150px;
}
.child1 {
background-color: red;
height: 150px;
width: 300px;
}
</style>
<div class="parent">
<div class="child1"></div>
<div class="child1"></div>
<div class="child1"></div>
<div class="child2"></div>
<div class="child1"></div>
<div class="child1"></div>
<div class="child2"></div>
<div class="child1"></div>
<div class="child1"></div>
<div class="child1"></div>
<div class="child2"></div>
<div class="child1"></div>
<div class="child1"></div>
<div class="child2"></div>
</div>
最佳答案
CSS 的 display: grid
是附图中描述的布局的解决方案:
.parent {
height: 800px;
width: 100%;
border: 1px solid black;
display: grid;
grid-gap: 2px;
grid-auto-columns: 150px;
grid-template-rows: repeat(4, 1fr);
grid-auto-flow: column;
color: white;
}
.child1 {
background-color: blue;
}
.child2 {
background-color: red;
grid-column: span 2;
}
网格:
display: grid;
在容器上启用网格布局。
grid-gap: 2px;
指定网格中行和列之间的间距为 2px。
grid-auto-columns: 150px;
网格中的列应为 150px 宽。
grid-template-rows: repeat(4, 1fr);
网格将包含 4 行等高。
grid-auto-flow: column;
当内容到达容器底部时,将创建一个新列。
网格元素:
如果没有任何额外的 css,蓝色元素将各自占据网格中 1 行高 1 列宽的单元格。
.child2 {
background-color: red;
grid-column: span 2;
}
红色元素将跨越 2 列。
关于html - 如何让内容垂直流动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51432434/