CSS网格：将块放入空白区域

Question

我使用的是使用grids.heroku.com生成的CSS网格。为了演示目的，我创建了一个三列网格。这里是demo。

HTML

<div class="container_3 clearfix"> 
<div class="grid_2"> 
    <div class="grid_2 alpha omega highlighted" style="margin-bottom: 20px;">Some content content content content content content content content content </div> 
    <div class="grid_1 alpha highlighted"> 
     1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 
    </div> 
    <div class="grid_1 omega highlighted"> 
     0 9 8 7 6 5 4 3 2 1 0 9 8 7 6 5 4 3 2 1 0 9 8 7 6 5 4 3 2 1 0 9 8 7 6 5 4 3 2 1 0 9 8 7 6 
    </div> 
</div> 
<div class="grid_1 highlighted"> 
    Content content content content content content content content content content content content content content 
</div> 

<div class="grid_2 target"> 
     123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 
</div> 

CSS

.container_3 { 
    background: yellow; 
} 
.highlighted { 
    background: green; 
} 
.target { 
    background: red; 
} 

/*grid css*/ 
body { 
    min-width: 240px; 
} 
.container_3 { 
    margin-left: auto; 
    margin-right: auto; 
    width: 240px; 
} 
.grid_1, 
.grid_2, 
.grid_3 { 
    display:inline; 
    float: left; 
    position: relative; 
    margin-left: 10px; 
    margin-right: 10px; 
} 

.push_1, .pull_1, 
.push_2, .pull_2, 
.push_3, .pull_3 { 
    position:relative; 
} 
.alpha { 
    margin-left: 0; 
} 
.omega { 
    margin-right: 0; 
} 
.container_3 .grid_1 { 
    width:60px; 
} 

.container_3 .grid_2 { 
    width:140px; 
} 

.container_3 .grid_3 { 
    width:220px; 
} 
.container_3 .prefix_1 { 
    padding-left:80px; 
} 
.container_3 .prefix_2 { 
    padding-left:160px; 
} 
.container_3 .suffix_1 { 
    padding-right:80px; 
} 
.container_3 .suffix_2 { 
    padding-right:160px; 
} 
.container_3 .push_1 { 
    left:80px; 
} 

.container_3 .push_2 { 
    left:160px; 
} 
.container_3 .pull_1 { 
    left:-80px; 
} 
.container_3 .pull_2 { 
    left:-160px; 
} 
.clear { 
    clear: both; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
    height: 0; 
} 
.clearfix:before, 
.clearfix:after { 
    content: '\0020'; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
    height: 0; 
} 

.clearfix:after { 
    clear: both; 
} 
.clearfix { 
    zoom: 1; 
} 

我怎样才能适应红色块进入空室在第二和第三列？

这里是我想要达到

列可根据内容长度的任何高度的图片。

Answer 1

如果你不是特别重视grids.heroku，只是寻找一个造型上的3柱网变通，这里有一个。它比grids.heroku吐出的代码简单得多（它的代码更少，它使用的类如size1of3和size2of3），如果您决定添加/删除列，稍后更改会更容易。只是一个想法。

http://jsfiddle.net/2HyqD/

Answer 2

您需要将.grid_2红块放在.grid_1块内。

http://jsfiddle.net/SE6wc/22/