如何垂直对齐元素,然后溢出到下一列(例如20行之后),然后垂直对齐其余元素。要显示的列数应取决于屏幕的宽度。随着浏览器宽度的减小,列数应减少,行高应增加。
下面给出的HTML将元素彼此水平对齐,然后溢出到下一行。我想做另一种方法,它应该在第一列中垂直添加元素,并在添加n个元素之后,应该移至下一列并填充行,然后移至下一列。
当前HTML代码。
<!DOCTYPE html>
<html>
<head>
<title>
Title
</title>
</head>
<style>
.column {
float: left;
}
</style>
<body >
<div style=" overflow: hidden; width: 80%;">
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 0
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 1
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 2
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 3
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 4
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 5
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 6
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 7
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 8
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 9
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 10
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 11
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 12
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 13
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 14
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 15
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 16
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 17
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 18
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 19
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 20
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 21
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 22
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 23
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 24
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 25
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 26
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 27
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 28
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 29
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 30
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 31
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 32
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 33
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 34
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 35
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 36
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 37
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 38
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 39
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 40
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 41
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 42
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 43
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 44
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 45
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 46
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 47
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 48
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 49
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 50
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 51
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 52
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 53
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 54
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 55
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 56
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 57
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 58
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 59
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 60
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 61
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 62
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 63
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 64
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 65
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 66
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 67
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 68
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 69
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 70
</div>
</div>
</body>
</html>
改为使用FLEX
。删除css float:left并使用css创建容器类:
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 400px;
}
这里有关于flex的出色指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
这里是结果代码:
<!DOCTYPE html>
<html>
<head>
<title>
Title
</title>
</head>
<style>
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 400px;
}
</style>
<body >
<div class="container" style=" overflow: hidden; width: 80%;">
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 0
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 1
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 2
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 3
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 4
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 5
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 6
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 7
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 8
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 9
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 10
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 11
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 12
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 13
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 14
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 15
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 16
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 17
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 18
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 19
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 20
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 21
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 22
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 23
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 24
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 25
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 26
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 27
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 28
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 29
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 30
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 31
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 32
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 33
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 34
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 35
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 36
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 37
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 38
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 39
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 40
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 41
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 42
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 43
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 44
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 45
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 46
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 47
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 48
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 49
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 50
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 51
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 52
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 53
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 54
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 55
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 56
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 57
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 58
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 59
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 60
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 61
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 62
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 63
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 64
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 65
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 66
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 67
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 68
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 69
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 70
</div>
</div>
</body>
</html>
dontnetnewbie要求
要显示的列数应取决于屏幕的宽度。随着浏览器宽度的减小,列数应减少,行高应增加。
您要寻找的是https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns
并且您可以使用https://developer.mozilla.org/en-US/docs/Web/CSS/column-width,因此列数将根据父级的宽度和为列设置的宽度进行调整。从列宽设置多列CSS时无需中介。
body>div {
column-width: 15em;
margin: auto;
}
<h1 style="text-align:center"> run me in fullpage and resize window's width </h1>
<div style=" overflow: hidden; width: 80%;">
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 0
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 1
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 2
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 3
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 4
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 5
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 6
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 7
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 8
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 9
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 10
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 11
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 12
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 13
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 14
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 15
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 16
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 17
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 18
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 19
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 20
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 21
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 22
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 23
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 24
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 25
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 26
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 27
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 28
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 29
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 30
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 31
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 32
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 33
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 34
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 35
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 36
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 37
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 38
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 39
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 40
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 41
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 42
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 43
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 44
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 45
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 46
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 47
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 48
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 49
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 50
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 51
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 52
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 53
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 54
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 55
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 56
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 57
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 58
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 59
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 60
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 61
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 62
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 63
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 64
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 65
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 66
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 67
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 68
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 69
</div>
</div>
<div class="column" style="margin-top: 1em; ">
<div style="width: 15em; padding-right: 0.5em;">Box 70
</div>
</div>
</body>
</html>
如果您已定义行数(在示例中为10),CSS-Grid也可以管理此行:
.grid {
display: grid;
grid-template-rows: repeat(10, 1fr);
grid-auto-flow: column;
}
<div class="grid">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
<div class="item">item 8</div>
<div class="item">item 9</div>
<div class="item">item 10</div>
<div class="item">item 11</div>
<div class="item">item 12</div>
<div class="item">item 13</div>
<div class="item">item 14</div>
<div class="item">item 15</div>
<div class="item">item 16</div>
<div class="item">item 17</div>
<div class="item">item 18</div>
<div class="item">item 19</div>
<div class="item">item 20</div>
<div class="item">item 21</div>
<div class="item">item 22</div>
<div class="item">item 23</div>
<div class="item">item 24</div>
<div class="item">item 25</div>
<div class="item">item 26</div>
<div class="item">item 27</div>
<div class="item">item 28</div>
<div class="item">item 29</div>
<div class="item">item 30</div>
<div class="item">item 31</div>
<div class="item">item 32</div>
</div>
尝试使用CSS列:
ul {
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
}
<ul>
<li><span>Box 1</span></li>
<li><span>Box 2</span></li>
<li><span>Box 3</span></li>
<li><span>Box 4</span></li>
<li><span>Box 5</span></li>
<li><span>Box 6</span></li>
<li><span>Box 7</span></li>
<li><span>Box 8</span></li>
<li><span>Box 9</span></li>
<li><span>Box 10</span></li>
</ul>
希望对您有帮助。
但是我清理了代码,只用一行代码替换了重复的DIV和CSS代码,以控制元素之间的填充和间距,您可以仅从一个位置更改值。
.column-container {
column-width: 15rem; /* width of each column */
column-gap: 1rem; /* increase gap between each column */
width: 80%;
}
.column-container .column {
margin-bottom: 1rem;
}
<div class="column-container">
<div class="column">Box </div>
<div class="column">Box 1</div>
<div class="column">Box 2</div>
<div class="column">Box 3</div>
<div class="column">Box 4</div>
<div class="column">Box 5</div>
<div class="column">Box 6</div>
<div class="column">Box 7</div>
<div class="column">Box 8</div>
<div class="column">Box 9</div>
<div class="column">Box 10</div>
<div class="column">Box 12</div>
<div class="column">Box 13</div>
<div class="column">Box 14</div>
<div class="column">Box 15</div>
<div class="column">Box 16</div>
<div class="column">Box 17</div>
<div class="column">Box 18</div>
<div class="column">Box 19</div>
<div class="column">Box 20</div>
<div class="column">Box 21</div>
<div class="column">Box 22</div>
<div class="column">Box 23</div>
<div class="column">Box 24</div>
<div class="column">Box 25</div>
<div class="column">Box 26</div>
<div class="column">Box 27</div>
<div class="column">Box 28</div>
<div class="column">Box 29</div>
<div class="column">Box 30</div>
<div class="column">Box 31</div>
<div class="column">Box 32</div>
<div class="column">Box 33</div>
<div class="column">Box 34</div>
<div class="column">Box 35</div>
<div class="column">Box 36</div>
<div class="column">Box 37</div>
<div class="column">Box 38</div>
<div class="column">Box 39</div>
<div class="column">Box 40</div>
<div class="column">Box 41</div>
<div class="column">Box 42</div>
<div class="column">Box 43</div>
<div class="column">Box 44</div>
<div class="column">Box 45</div>
<div class="column">Box 46</div>
<div class="column">Box 47</div>
<div class="column">Box 48</div>
<div class="column">Box 49</div>
<div class="column">Box 50</div>
<div class="column">Box 51</div>
<div class="column">Box 52</div>
<div class="column">Box 53</div>
<div class="column">Box 54</div>
<div class="column">Box 55</div>
<div class="column">Box 56</div>
<div class="column">Box 57</div>
<div class="column">Box 58</div>
<div class="column">Box 59</div>
<div class="column">Box 60</div>
<div class="column">Box 61</div>
<div class="column">Box 62</div>
<div class="column">Box 63</div>
<div class="column">Box 64</div>
<div class="column">Box 65</div>
<div class="column">Box 66</div>
<div class="column">Box 67</div>
<div class="column">Box 68</div>
<div class="column">Box 69</div>
<div class="column">Box 70</div>
</div>