以列而不是行排列的正方形的 CSS 网格答案

【问题标题】：CSS grid of squares laid out in columns not rows以列而不是行排列的正方形的 CSS 网格
【发布时间】：2012-01-12 21:55:04
【问题描述】：

我目前有一个由方形 DIV 组成的网格（每个 200 像素 x 200 像素）。

我从左上角开始，每个都向左浮动，这样第二个在第一个的右侧，第三个在那个的右侧，依此类推。当它的容器中的水平空间用完时，下一个方块显然会自动开始新的一行。

如果您希望网格在每次填满一行时保持垂直变长，这很好，但我希望我的网格高三个正方形并增长到右侧，所以第一个正方形位于左上角，在它下面的第二个，在它下面的第三个，然后（因为容器是 600px 高）第 4 个正方形应该开始一个新列并转到第一个的右侧。

是否有可能在未指定数量的正方形上实现这一点，这样它就可以不断增长到新的列而不使用 javascript？

不需要IE6支持。

任何帮助将不胜感激。

【问题讨论】：

如何将 div 放在一个 div 容器中（200px x 600px）然后向左浮动？
如果没有某种类型的包装器，我可以预见很多问题。您最好将 div 包装器设置为 3 个 div 的高度。不要浮动内部 div，只浮动包装器。对于每 3 个 div，只需关闭并打开一个新 div。您是从数组还是某种类型的循环中构建 div？
砌体怎么样？ masonry.desandro.com/index.html
包装 div 是一种选择，但正如我评论过的其他答案之一，方块是动态输出的，所以我必须使用 jquery 在每组 3 个方块上创建包装器一次网格已加载。这是一个选项。

标签： javascript html css

【解决方案1】：

你可以试试 CSS 3 的多列 http://www.w3.org/TR/css3-multicol/ , http://www.css3.info/preview/multi-column-layout/

使用像

这样的属性

-moz-column-width: 5em;
-webkit-column-width: 5em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;

http://jsfiddle.net/Txgnk/1/

看起来 IE 10 是第一个支持它的 IE http://caniuse.com/multicolumn

【讨论】：

我很想用这个，但像往常一样 IE 会妨碍 :(

【解决方案2】：

试试这个，

<style>
.parent {
  height:600px;
  white-space: nowrap;       
}

.child {
  width: 200px;
  height: 600px;
  display:inline-block;       
}

.grand-child {
  width: 200px;
  height: 200px;
  border: 1px solid;
}
</style>

<div class="parent">
  <div class="child">
    <div class="grand-child"></div>
    <div class="grand-child"></div>
    <div class="grand-child"></div>
  </div>
  <div class="child">
    <div class="grand-child"></div>
    <div class="grand-child"></div>
    <div class="grand-child"></div>
  </div>
  ...
  ...
</div>

【讨论】：

方块将一次一个动态地输出到页面，所以我能想到的将每组三个方块包装在
中的唯一方法是使用 javascript一旦他们在页面上？
@jonhobbs：如果不使用 JS，如何一次输出一个？如果是这样，为什么要求没有 JS？
如果您使用 javascript，您可以动态创建“子”div 并在创建时附加“grand-child”div。在每三个“孙子”div 之后创建一个新的“子”div。如果您使用任何 javascript 库，例如 jquery，这可以很容易地完成。