Question

我想我有最简单的问题，无法找到现成的解决方案。

我需要制作一个方形物品网格，它们具有固定的宽度和高度以及它们之间的固定距离。

我最多需要三列，在浏览器调整大小期间，我需要将此网格缩小为两个，然后一列（项目必须始终保持它们之间的大小和距离）。

这就是为什么我不喜欢任何开源网格系统（Boostrap，Skeleton等）它们都使用%宽度，并且列总是在调整大小时改变宽度。

最简单的方法是什么？

Answer 1

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

http://jsfiddle.net/cuAfg/

HTML：

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

CSS：

.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;
}

Answer 2

如果您的积分具有已知的width和水平边距，则可以在父容器上设置 maw-width ，以允许每行最多3个。

例如，200px方形盒子，宽度为400px，宽度为900px，允许其中3个，第四个将下降。

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

使用 float ， inline-block 或 flex

演示如果你愿意，也可以设置一个min-width。

使用的方法在这里并不重要:)。

Answer 3

有几种技巧。由于您的问题含糊不清，我只能用一般术语来涵盖它们。

首先，您使用以下内容开始修复：

width: <number>px;

然后创建列，您可以这样做：

display: inline-block;

或者

float: left;

如果你使用花车，你可能需要在主容器上overflow: auto，这样主要的布局就不会崩溃。

Answer 4

CODEPEN

HTML，

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

和css，

* {
  -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
}

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

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

4 个答案: