Question

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

我需要制作一个固定宽度和它们之间固定距离的网格。

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

内容遍布所有列，并且应该遍布所有列。

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

最简单的方法是什么？

修改/澄清：

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

<div>See the fiddle</div>

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

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

Answer 1

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

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

您可以使用媒体查询in this manner甚至溢出：无隐藏不适合的列，如果这是您想要的行为。

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

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

，如 Fiddle

Answer 3

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

这是Fiddle Demo

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

具有固定列宽的响应网格

3 个答案: