我想为移动设备创建一个布局，它将列出元素的容器。根据设备屏幕宽度，我想在一行中显示更多或更少的元素。
我需要满足一些条件:
- 每个元素的最大宽度为 180 像素
- 元素之间的固定边距为 5px，但不在容器的左右两侧
- 元素将根据设备宽度增长、缩小宽度
- 如果有足够的空间容纳第 3、4 个元素，则它们应该在同一行
- 不适合一行的元素将对齐到下一行，顶部边距为 5px
- 一行中的框应具有相同的高度
到目前为止，我的尝试看起来像这样: https://codepen.io/anon/pen/NJZyeZ
CSS:
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
margin-right:5px;
max-width: 170px;
width: calc(50% - 5px);
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Two Equal Columns</h2>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
</div>
</body>
</html>最后我想遍历我的元素数组并构建页面。所以在我的代码中使用这种方法，我有行和列，这需要知道设备的宽度才能知道一行中有多少个元素。
什么是更好的方法来实现我想要的？
最佳答案
CSS 网格:
您只需定义网格的属性；包括填充行的行为；列和行的最小或最大尺寸、元素之间的间隙等。
在您的情况下，您知道单行中可以包含的最大列数是 4，因此您可以将 grid-template-columns 设置为:
grid-template-columns: repeat(4, minmax(100px, 180px));
所以你总是最多有 4 列，每列的最小宽度为 100 像素，最大宽度为 180 像素；
.grid-container {
display: grid;
grid-template-columns: repeat(4, minmax(80px, 180px));
grid-auto-rows: minmax(100px, auto);
grid-gap: 5px;
}
.grid-item {
border: 1px solid black;
}<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>flexbox
这需要进行更多调整才能完全按照您的需要运行，但这也是可能的。
body * {
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 0 -2.5px;
}
.flex-item {
border: 1px solid black;
flex: 1 1 20%;
min-height: 100px;
max-width: 180px;
margin: 0 2.5px;
margin-bottom: 5px;
}<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>关于html - 如何为具有两个以上元素的移动设备创建 float 布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55387582/