你如何在Zurb基金会流血的专栏背景？

什么是Zurb Foundation将列的背景延伸到屏幕边缘，同时保持响应？你如何在Zurb基金会流血的专栏背景？

作为示例，请参阅下图中的蓝色列。

enter image description here

更新：

我能够列的子元素设置为margin-left: -9999px; padding-left: 9999px;来实现这一目标。但我仍然想知道是否有更合适的方法来做到这一点。

更新：

我能想出一个更好的解决方案，涉及的伪元素，见下文。感谢@Paulie_D提示！

来源

2013-10-27 timofey

有，使用伪元素，但它基本上以相同的方式工作。 http://css-tricks.com/full-browser-width-bars/ –

感谢@Paulie_D，伟大的文章，我会尝试使用伪元素。 – timofey

看起来最好的选择是使用pseudo elements。以下CSS代码将出血应用于左侧列。

.column { position: relative; } 
.column:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
    right: 100%; 
}

请参阅Column Bleeding在行动。有关更多信息，请参见this article（谢谢@Paulie_D）。

如果有人有任何问题，我很乐意选择更好的解决方案。

来源

2014-03-11 03:52:00 timofey

你如何在Zurb基金会流血的专栏背景？

回答

相关问题