如何使元素突破網格和觸摸邊緣的瀏覽器

請參考下圖。我有一個網格（使用波旁整潔）。第一個粉紅色元素通常適合5列以上，但綠色元素需要從第6列開始，但結束了突破網格並觸摸瀏覽器的邊緣。我相當確信，這是不可能的，沒有使用JavaScript，但希望我可以被證明是錯誤的！如何使元素突破網格和觸摸邊緣的瀏覽器

任何想法如何做到這一點？

編輯：這需要使用外部容器上的最大寬度！

示例HTML：

<div class="container"> 
<div class="pink"></div> 
<div class="green"></div> 
</div>

波旁：

.container{ 
    @include outer-container(); 
} 
.pink{ 
    @include span-columns(5); 
} 
.green{ 
    @include span-columns(7); 
    // What to do here??? 
}

來源

2016-09-22 Chris

如果你讓jsfiddle.net –

如果這是表象，而不是包含內容那麼這將是非常有益的... HTTP：//計算器。 com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen –

我有一個解決方案。這不是最漂亮的，但我認爲它通常會尊重整潔的系統。在CodePen上：https://codepen.io/alexbea/pen/LRxXpO。

粉紅色和綠色（我的例子中的紫色和青色）最終被包裹在自己的容器中，它們對齊網格。第二列通過使用與填充相等的負右邊距發生。在這種情況下，使用vw作爲填充允許簡單的一致性。您可能需要調整您的案例的值。

HTML

<div class="container"> 
<div class="first"><div class="pink"></div></div> 
<div class="second"><div class="green"></div></div> 
</div>

SCSS

.container { 
    @include outer-container(100%); 
    @include pad(2vw); 
} 

.first { @include span-columns(5); } 
.second { @include span-columns(7); } 

.pink, 
.green { height: 100px; } 

.pink { background-color: pink;} 
.green { 
    background-color: green; 
    margin-right: -2vw; 
}

來源

2016-09-22 23:22:39 alexbea

感謝您的輸入！這可以工作，但不是當外容器有最大寬度時。這是我面臨的真正問題。 – Chris

夠公平的。這不是你在帖子中提到的一個因素。正如Sohaib Mohammed所說，如果您提供問題代碼的工作演示，您將獲得更多成功並獲得良好答案。一種解決方法是使用vw代替百分比進行填充。您可以按照我更新的答案中所顯示的方式進行操作 – alexbea

嘿，如果我使用保證金 - 右：-12.06vw;我得到我想要的 - 謝謝！我試圖創建一個小提琴，但無法弄清楚如何導入波旁整潔。 https://codepen.io/anon/pen/XjrvZE – Chris

在這種情況下，我沒有看到一個原因使用的網格altogother，因爲你真的只用它在第一列獲得一定的大小。您可以設置一個超過某個最小尺寸的斷點，從而對您的佈局進行網格劃分，然後您可以簡單地將第2個「列」移動到絕對位置。

如果您打算將第二列的溢出部分用於純粹的設計目的，並且它不包含內容，則可以使用第二列僞元素：before或：after進行絕對定位。

來源

2016-09-22 06:48:36

但是沒有網格，粉紅色（和綠色）如何定位，以便它們與頁面的其餘部分（使用網格）？ – Chris

您可以使用粉色元素的使用網格，然後通過粉色的寬度+列天溝絕對偏移綠色的元素。你是這個意思嗎？ –

如何使元素突破網格和觸摸邊緣的瀏覽器

回答

相關問題