按列而非行排列的正方形CSS网格

CSS grid of squares laid out in columns not rows

本文关键字：正方形 CSS 网格 排列      更新时间：2023-09-26

我目前有一个由正方形div（每个div 200px x 200px）组成的网格。

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

如果你希望每次一行填满时网格在垂直方向上不断变长，这是很好的，但我希望我的网格有三个正方形高，并向右手边延伸，所以第一个正方形在左上角，第二个在它下面，第三个在它的下面，然后（因为容器有600像素高）第四个正方形应该开始一个新的列，并转到第一个的右边。

有没有可能在不指定数量的正方形中实现这一点，这样它就可以在不使用javascript的情况下不断增长到新的列中？

IE6支持是不必要的。

任何帮助都将不胜感激。

您可以尝试CSS3的多列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是第一个支持它的IEhttp://caniuse.com/multicolumn

试试这个，

<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>
相关文章：