我正在尝试使用这种布局实现全窗口网格:
我试着把它分成更小的部分,但它们似乎总是重叠。这可能仅使用 CSS 吗?
我目前正在使用 Bourbon neat grid (SASS)。
编辑: 代码笔:http://codepen.io/anon/pen/IsCke 我为左侧幻灯片制作了一个 3x3 的网格,而右侧没有特定的网格。一切都适合 5x3 网格。
显然,我可以绝对定位所有内容,但感觉不干净或可扩展。 RWD 需要网格。
编辑 2: 现在我已经用 4 向绝对位置定位/调整了每个 block ,如下所示:
.description {
position: absolute;
top: 0%;
right: 40%;
bottom: 66.66667%;
left: 0%;
}
但我对不能用网格来做这件事感到沮丧。
最佳答案
您可以制作自己的 mixins 来生成您想要的网格
$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);
}
等等
您只需输入方 block 正在使用的右上角部分,如果它大于 1x1,则输入其尺寸。我希望我的数学是正确的。我在脑海中做到了。
关于css - 仅在 CSS 中具有可变高度的网格布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20406869/