向CSS网格系统(如960.gs)添加填充
我正在建设一个网站,它利用了流行的960.gs 16柱网格系统。以下是设计相关部分的屏幕截图,顶部覆盖网格柱: 问题是白色的“立即流行”框。因为这有一个白色的背景,我想要一些填充框内。非常简单:我在父对象中添加了一个向CSS网格系统(如960.gs)添加填充,css,960.gs,Css,960.gs,我正在建设一个网站,它利用了流行的960.gs 16柱网格系统。以下是设计相关部分的屏幕截图,顶部覆盖网格柱: 问题是白色的“立即流行”框。因为这有一个白色的背景,我想要一些填充框内。非常简单:我在父对象中添加了一个,并使用填充:10px和白色背景对其进行了适当的样式设置 当我试图在这样的“内部”中重复使用网格时,问题就出现了。例如,在这个白色框中,我希望链接列表位于一个5列容器中,而图像位于一个3列容器中(对不起,屏幕截图没有显示这个大小) 我尝试在.internal类中重新定义我的网格列大
,并使用填充:10px
和白色背景对其进行了适当的样式设置
当我试图在这样的“内部”中重复使用网格时,问题就出现了。例如,在这个白色框中,我希望链接列表位于一个5列容器中,而图像位于一个3列容器中(对不起,屏幕截图没有显示这个大小)
我尝试在.internal
类中重新定义我的网格列大小,这在一定程度上起到了作用-我从每个列大小中删除了10个像素,因为总宽度需要比以前减少20px才能考虑到边距。这在.internal
容器中正好有两个子s
的情况下起作用,但很明显,如果多于或少于2个子s,那么事情就开始出错
有人有处理这类事情的好策略吗?我愿意在所有的栏上都加上填充物,不管背景颜色如何,但在破解网格时,我无法像我希望的那样工作
谢谢
马特960gs有一个.alpha
和.omega
类用于嵌套。通常,这会从应用它的元素中删除前导10px和尾随10px边距。您可能会将这些内容颠倒过来,并滥用它们来提供所需的填充—总的列宽会增加,但填充将位于“错误”的一侧
...
...
我还没有测试过这一点,所以不确定它是否有效这并不是我所需要的,但会将您标记为最接近解决方案的答案。
<div class="container_12">
<div class="grid_12">
<div class="grid_5 omega">...</div>
<div class="grid_3 alpha">...</div>
</div>
</div>