具有固定列寬的響應式網格

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