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/