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

时间:2012-01-12 21:55:04

标签: javascript html css css3

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

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

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

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

不需要IE6支持。

真的很感激任何帮助。

2 个答案:

答案 0 :(得分:2)

您可以尝试使用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

答案 1 :(得分:0)

试试这个,

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