Question

我正在尝试使用这种布局来实现全窗格：

Complex layout http://i41.tinypic.com/y06qb.gif

我试图将它分成较小的部分，但它们似乎总是重叠。这只能使用CSS吗？

我现在正在使用Bourbon整洁网格（SASS）。

修改： Codepen：http://codepen.io/anon/pen/IsCke 我为左侧滑块制作了一个3x3网格，右侧没有特定的网格。一切都适合5x3网格。

显然我可以绝对定位所有东西，但它感觉不干净或可扩展。 RWD需要网格。

编辑2 ：现在我已经使用4向绝对位置定位/调整每个块的大小，如下所示：

.description {
      position: absolute;
      top: 0%;
      right: 40%;
      bottom: 66.66667%;
      left: 0%;
}

但是我觉得不能用网格来做这件事。

Answer 1

你可以制作自己的mixin来生成你想要的网格

$cols: 5;
$rows: 3;

@mixin grid($col: 1, $row: 1, $xSize: 1, $ySize: 1) {
     position: absolute;
     display: block;
     top: percentage(($row - 1) / $rows);
     bottom: percentage($row / $rows + ($ySize / $rows));
     left: percentage(($col - 1) / $cols);
     right: percentage($col / $cols + ($xSize / $cols));
}

.first {
     @include grid(1, 1, 3, 1);
}
.topRight {
     @include grid(1, 4, 2, 2);
}
.middleLeft {
     @include grid(1, 2);
}

等

你只需要输入bock正在使用的右上部分，如果它大于1x1输入它的尺寸。我希望我的数学是正确的。我是在脑子里做的。

仅在CSS中具有可变高度的网格布局

1 个答案: