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

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

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

Answer 2

如果您不是特别依赖于grids.heroku而只是在3列网格上寻找样式，那么就是一个。它比grids.heroku吐出代码简单得多（代码少，而且它使用size1of3和size2of3等类），如果您决定添加/删除它会更容易更改列。只是一个想法。

http://jsfiddle.net/2HyqD/

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

2 个答案: