html - 首先垂直对齐 div 元素，然后在下一列中水平对齐
问题描述
如何垂直对齐元素，然后溢出到下一列（比如 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>当前输出和预期输出如下所示。在 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>推荐阅读
- node.js - 等待用户输入回复使用 Node.js 的 facebook 机器人
- python - attrs odoo10 中的不规则性
- android - 不要打开具有未决意图的活动，除非该活动的实例已经在运行
- excel - 如果单独的日期列来自上个月，则计算某一列
- c++ - std::list 在 boost::interprocess::managed_shared_memory
- nginx - 在 Ubuntu 16.04 上的 Nginx 中设置 phpmyadmin 和反向代理后无法获取 /phpmyadmin
- merge - 将复制值合并到 dup ID？
- apache-spark - spark-提交依赖冲突
- centos7 - 运行命令 sudo yum update -y 时出现依赖错误
- php - 在另一个类中扩展的类中调用函数的正确方法是什么 - PHP