时间戳

首页 > 解决方案 > 如何为具有两个以上元素的移动设备创建浮动布局？

html - 如何为具有两个以上元素的移动设备创建浮动布局？

问题描述

我想为移动设备创建一个布局，它将列出元素的容器。根据设备屏幕宽度，我想在一行中显示更多或更少的元素。

我需要匹配一些标准：

  1. 每个元素的最大宽度为 180 像素
  2. 元素之间的固定边距为 5px，但不在容器的右侧、左侧
  3. 元素会根据设备宽度增大、缩小宽度
  4. 如果有足够的空间容纳第三、第四个元素，它应该在同一行
  5. 不适合一行的元素将对齐到下一行，顶部边距为 5px
  6. 一行中的盒子应具有相同的高度

到目前为止，我的尝试看起来像这样： 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>

最后，我想遍历我的元素数组并构建页面。因此，在我的代码中使用这种方法，我有行和列，这需要知道设备的宽度才能知道一行中有多少元素。

什么是实现我想要的更好的方法？

标签： htmlcss

解决方案

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>

弹性盒

这将需要更多的调整才能完全按照您的需要进行，但这也是可能的。

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>

推荐阅读