你如何在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基金會流血的專欄背景？

回答

相關問題