具有固定列宽的响应式网格

Question

我想我遇到了最简单的问题，找不到现成的解决方案。

我需要制作一个具有固定宽度和固定距离的网格。

我需要 x 列 400 像素（x = 总宽度/400），并且在调整浏览器大小期间，我需要此网格逐列缩小（列必须始终保持其宽度大小和它们之间的距离）。

内容流经所有列，应该分布在所有列上。

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

最简单的方法是什么？

编辑/澄清：

这是没有列的样子： http : //jsfiddle.net/xjrt8qrm/16/show/

<div>See the fiddle</div>

我希望它有 x 列。 x 是 400px 列的最大可能数量，具体取决于用户分辨率。 我只想要一行列，所以内容就像在报纸上一样从上到下传播。

所以它在 PC 上看起来像这样： http : //i.imgur.com/kmd620p.png （你可以忽略那里的文本/评论）。

Answer 1

这很简单。 容器将内容物放在一起。 向左浮动将使它们从左到右排列。 当容器用完容纳它们的空间时，它们会从右侧下降到一个下方的一行。 清除 div 清除浮动，以便它不会传播到附近的其他类。 显然，您必须按照您的风格处理填充、边距等。

如果你需要像报纸的垂直布局，你可以尝试的解决方案是这样一个

您可以以这种方式使用媒体查询，甚至可以使用 overflow:none 来隐藏不适合的列（如果这是您想要的行为）。

这是一个简单的解决方案：

HTML：

<div class="container">
      <div class="fourhundred">
          Div 1
      </div>
      <div class="fourhundred">
          Div 2
      </div>
      <div class="fourhundred">
          Div 3
      </div>
      <div class="clear"></div>
    </div>

CSS：

.fourhundred { 
  width: 400px;
  margin: 10px;
  float: left;
}
.clear { clear:left }
.container { width: 100% }

Answer 2

这就是设计 flexbox 的原因。 添加到您的容器：

.container {
  display: flex;
  justify-content: space-between;
  align-content: space-between;
    width:100%;
}

就像在这个小提琴中一样

Answer 3

简单使用的width: calc(100% / 3); 您可以使用任何值而不是 3。将整个宽度分成 3。

这是小提琴演示

<div id = "main">
    <div id ="sub">One
    </div>
    <div id ="sub">Two
    </div>
    <div id ="sub">Three
    </div>
</div>

CSS 部分

#main{
    border: 2px solid black;
    height:100px;
    width:100%;
    position: relative;
    display:flex;
}
#sub{
    border:1px solid red;
    width: calc(100% / 3);
    height: calc(100% - 40px);
    padding:10px;
    margin : 5px;   
    display:inline-block;
}