请注意,第4项被推到顶部而不是与第3项对齐。我无法使用flexbox的align-items: flex-end
实现这一点,也不能使用浮点数。
我知道通过使用砌体/同位素实现这一点,但我想避免仅使用javascript进行此布局。
是否可以仅使用CSS?
答案 0 :(得分:0)
按行分隔并为这些行添加flex
.top {
display: flex;
flex-direction: column;
}
.row1, .row2 {
display: flex;
}
.box {
background-color: green;
margin: 20px;
padding: 50px;
}
.one {
height: 300px;
}
.two, .three, .four {
height: 140px;
}
<div class="top">
<div class="row1">
<div class="box one">1</div>
<div class="box two">2</div>
</div>
<div class="row2">
<div class="box three">3</div>
<div class="box four">4</div>
</div>
</div>
答案 1 :(得分:0)
是的,可以通过CSS Grid Layout:
.grid {
display: grid;
grid-gap: 10px 30px;
grid-template-rows: auto 1fr auto;
}
/* styles just for demo */
.grid__item {
background-color: #e0e0e0;
font-size: 30px;
padding: 10px;
}
.b, .d {
align-self: flex-start;
}
.a {
grid-row: 1 / span 2;
/* setting height just for demo */
height: 200px;
}
.b {
grid-column: 2;
}
.c {
grid-row: 3;
}
.d {
grid-column: 2;
}
<div class="grid">
<div class="grid__item a">1</div>
<div class="grid__item b">2</div>
<div class="grid__item c">3</div>
<div class="grid__item d">4</div>
</div>
如果您需要IE \ Edge支持,则应使用旧的网格语法。您可以使用其他网格列和行伪造grid-gap
。演示:
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 30px 1fr;
grid-template-columns: 1fr 30px 1fr;
-ms-grid-rows: auto 10px 1fr 10px auto;
grid-template-rows: auto 10px 1fr 10px auto;
}
/* styles just for demo */
.grid__item {
background-color: #e0e0e0;
font-size: 30px;
padding: 10px;
}
.b, .d {
-ms-grid-row-align: start;
align-self: flex-start;
}
.a {
-ms-grid-row-span: 3;
grid-row: 1 / span 3;
/* setting height just for demo */
height: 200px;
}
.b {
-ms-grid-column: 3;
grid-column: 3;
}
.c {
-ms-grid-row: 5;
grid-row: 5;
}
.d {
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 3;
grid-row: 3;
}
<div class="grid">
<div class="grid__item a">1</div>
<div class="grid__item b">2</div>
<div class="grid__item c">3</div>
<div class="grid__item d">4</div>
</div>