是否可以从容器中提取元素,同时保持它们与主网格对齐?
在下图中,我展示了我想要实现的目标。假设我的所有文本(包括第一列中的较小细节)都位于跨越第 2 列和第 3 列的容器上。然后,我希望较小的文本从该容器向左拉一列,从而有效地移动到第 1 列,同时与主要副本保持一致。
红色框是主网格,蓝色框是内部容器元素。
这对于奇点来说可能吗?
最佳答案
有了奇点,这完全可能实现!
要将元素从其容器中拉出,只需使用负边距。但正确的宽度和边距大小需要一些棘手的数学计算:
<div id=container>
<div id=a>a</div>
<div id=b>b</div>
<div id=c>c</div>
</div>
$grids: 1 2 2
$gutters: .25
#container
+grid-span(2,2)
#b
$coefficient: (1 + 2 + 2) / (2 + 2)
$width: column-span(1, 1) * $coefficient
$gutter: gutter-span() * $coefficient
width: $width
margin-left: 0 - $width - $gutter
float: left
clear: both
+layout(2 2)
#a, #c
+grid-span(2, 1)
结果:
演示:http://sassbin.com/gist/6953993/
请注意,拉出的列的宽度和位置与网格不完全匹配。这可能是由于浏览器中的舍入错误,或者我的数学可能是错误的。
关于css - 从网格容器中推/拉元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19336164/