我可以轻松地使用 float
制作此布局。但是很难处理 flex box。
样式:
.a {
background: red;
float: left;
width: 30%;
height: 100px;
}
.b,
.c {
background: green;
overflow: hidden;
height: 45px;
}
.b {
margin-bottom: 10px;
}
.c {
background: lightblue
}
html:
<div class="a">column</div>
<div class="b">row1</div>
<div class="c">row2</div>
非常感谢。
最佳答案
它是如何工作的?
将您的列包裹在具有高度设置的公共(public)父元素(例如 main
元素)中。然后使用 flex-direction: column
放置你的元素,并使用 justify-content: space-between 在
。b
和 c
之间创建一个空间
a
列的高度是容器的 100%
,因此 b
和 c
可以移动到感谢 flex-wrap: wrap
的新专栏。
CSS
main {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
height: 100px;
}
.a {
background: red;
height: 100%;
width: 30%;
}
.b, .c {
background: green;
height: 45px;
width: 70%;
}
.c {
background: lightblue
}
它是如何工作的?
使用 Grid Layout
,您可以通过创建具有 10
列和 2
行以及 之间的间隙的布局来实现相同的目的b
和 c
与 row-gap: 10px
。然后调整所有的各种(column|row
)-(start|end
)
CSS
main {
display: grid;
grid-template-columns: repeat(10, 1fr);
row-gap: 10px;
width: 100%;
}
.a {
background: red;
grid-area: 1 / 1 / 3 / 3;
}
.b,
.c {
grid-column: 3 / 11;
background: green;
overflow: hidden;
height: 45px;
}
.b {
grid-row-start: 1;
}
.c {
grid-row-start: 2;
background: lightblue;
}
关于css - 混合行和列的 Flex 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50482453/