您可以使用flex-direction:column和flex-wrap:wrap,使用Flexbox执行此操作,此处为
Fiddle
更新:这不是很好的解决方案,因为你必须在父元素上使用固定高度,如果你的内容溢出其中一个,它将打破布局,你可以在这里看到Fiddle但在某些情况下它可能是有用的.
body, html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
ul {
height: 100vh;
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
li {
width: 50%;
}
li:nth-child(1) {
background: #000000;
flex: 0 0 33.33%;
}
li:nth-child(2) {
background: #30BB75;
flex: 0 0 33.33%;
}
li:nth-child(3) {
background: #BB3047;
flex: 0 0 33.33%;
}
li:nth-child(4) {
flex: 0 0 100%;
background: #305EBB;
}
- 1
- 2
- 3
- 4