Question

我目前有一个用方形DIV制作的网格（每个200px x 200px）。

我已经从左上角开始并向左漂移，使第二个位于第一个的右侧，第三个位于右侧，依此类推。当它在容器中的水平空间用完时，下一个方块显然会自动开始一个新行。

如果你想让网格在每次填满时都垂直延长，这是很棒的，但是我希望我的高三个方格并且长到右边，所以第一个方格位于左上角，第二个在它下面，第三个在它下面，然后（因为容器是600px高）第四个方格应该开始一个新的列并转到第一个的右边。

是否有可能为未指定数量的正方形实现此目的，因此它不会在不使用javascript的情况下不断增长为新列？

不需要IE6支持。

真的很感激任何帮助。

Answer 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

Answer 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>

CSS网格的正方形布局列而不是行

2 个答案: