html中让列表纵向紧密排列,html – CSS：排列多行和多列的列表

您可以使用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