Html 如何制作具有固定宽度列的流体栅格？

我想我遇到了有史以来最简单的问题，却找不到现成的解决办法

我需要用固定的宽度和高度以及它们之间的固定距离来制作一个正方形网格

我最多需要三列，在调整浏览器大小的过程中，我需要将这个网格缩小到两列，然后一列项目必须始终保持它们的大小和它们之间的距离

这就是我不喜欢任何开源网格系统Boostrap、Skeleton等的原因。它们都使用%width，列的宽度总是在调整大小时改变

---

最简单的方法是什么？

有几种技术。由于你的问题含糊不清，我只能笼统地谈一下

首先，您可以使用以下固定格式开始：

width: <number>px;

或

---

如果使用浮动，可能需要在主容器上溢出：auto，这样主布局就不会崩溃。

有两种方法。由于你的问题含糊不清，我只能笼统地谈一下

首先，您可以使用以下固定格式开始：

width: <number>px;

或

如果使用浮动，则可能需要在主容器上设置overflow:auto，这样主布局就不会崩溃

html

这样，a b和c将保留其原始宽度和高度。当容器没有足够的宽度时，c将下降，然后b

html

---

这样，a b和c将保留其原始宽度和高度。当容器没有足够的宽度时，c将下降，b将下降。

只是一个随机的简单模型，用于一个有一堆正方形的页面，随意调整结果：

HTML:

---

只是一个随机的简单模型，用于一个有一堆正方形的页面，随意调整结果大小：

HTML:

---

如果块的宽度和水平边距已知，则可以在父容器上设置maw宽度，使每行最多允许3个maw宽度

例如，一个200像素的方形盒子，40像素的边距，900像素的宽度可以容纳其中的3个，第四个盒子会下降

一旦收缩，只剩下2个，依此类推

使用或进行演示。如果愿意，您也可以设置最小宽度

---

此处使用的方法并不重要：。

如果块的宽度和水平边距已知，则可以在父容器上设置maw宽度，以允许每行最多使用3个

例如，一个200像素的方形盒子，40像素的边距，900像素的宽度可以容纳其中的3个，第四个盒子会下降

一旦收缩，只剩下2个，依此类推

使用或进行演示。如果愿意，您也可以设置最小宽度

---

这里使用的方法并不重要：。

非常感谢您的帮助！非常感谢你的帮助！您的解决方案是如此简单和伟大，但不幸的是，它没有为我的工作，因为是。所以我使用了raunay的代码。你的解决方案是如此简单和伟大，但不幸的是，它并没有像现在这样对我有效。所以我用了劳内的密码。很高兴能帮上忙！这真是个好办法。唯一困扰我的是小屏幕上的水平滚动…很高兴能够提供帮助！这真是个好办法。唯一困扰我的是小屏幕上的水平滚动。。。

float: left;

<div class="container">
  <div class="inner-container">
    <div class="box">a</div>
    <div class="box">b</div>
    <div class="box">c</div>
  </div>
</div>

* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;

  text-align: center;
}

.container {
  /* width = 200 * 3 + 25 * 2 = 650 */
  float: left;
  position: relative;
  left: 50%;
}

.inner-container {
  float:left;
  position: relative;
  left: -50%;
}

.container::after {
  content: '';
  display: block;
  clear: both
}

.box {
  float: left;
  background-color: blue;
  width: 200px;
  height: 200px;
  margin-right: 25px;
  margin-bottom: 25px;
  display: inline-block
}

.box:last-child {
  margin-right: 0
}

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  /* etc */
</div>

.container {
    width: 960px;
    margin: auto;
    overflow: auto;
}
@media only screen and (max-width : 960px) {
    .container {
        width: 640px;
    }
}
@media only screen and (max-width : 640px) {
    .container {
        width: 320px;
    }
}
.block {
    width: 300px;
    height: 300px;
    float:left;
    margin: 10px;
    background: #ccc;
}