與奇點重疊的塊元素

我正在做奇點網格系統的第一個項目，到目前爲止我非常喜歡它。但是，在我有一個<h2>和<h3>元素重疊的部分中，我遇到了一個奇怪的問題......確實很難找出問題所在。與奇點重疊的塊元素

我的開發項目，請訪問： http://senseslabv3.brunomonteiro.mixture.io/

首先<section>與class=intro。

有沒有人有關於它正在發生的線索？謝謝你的時間。

來源

2013-04-29 Bruno Monteiro

您能否提供問題部分的HTML和SASS？ – 2013-04-30 04:40:35

清除既需要在某處下方的網格跨度混入宣佈.tag h3 {clear: both;}

來源

2013-04-29 19:07:19 scottkellum

嗨斯科特，在'grid-span'之後添加'clear：both''似乎解決了這個問題，但是在網絡版本中可能會看到網格混亂......可能是因爲它使用'clear：none '用於奇點。奇怪，它似乎很像一個簡單的用例... 任何其他的想法？感謝您的幫助。 – 2013-04-29 21:55:16

我已經在'h2'和'h3'之間添加了一個不太優雅的'div'，其中'clear：both'。：| – 2013-04-29 22:24:17

，而不是醜陋<div style="clear: both;"></div>考慮這個問題：

.intro h2 { 
    @include pie-clearfix; }

或者，如果你使用toolkit：

.intro h2 { 
    @extend %clearfix-micro; }

如果您分享您的SASS代碼，我們可能會更好地解決您的問題。

來源

2013-04-30 08:37:18

正如其他人所說，你需要清除你的浮標。默認情況下，Singularity的輸出樣式是「隔離」，它需要了解如何清除浮點數（clear: left，clear: right，clear: both，clear: none）。奇點假定不明確（clear: none），這意味着如果未正確清除，網格項目可能會重疊。它這樣做是爲了堅持隔離輸出方法最常見的心理模型，特別是將塊放在網格上的一個離散點上。清除浮標將清除它們到物品的邊緣，最明顯的是通過創建新的行。請參閱Mozilla Developer Network article on Clear。

請注意，清理浮動和lolmaus建議的修復方法實際上會做不同的事情。清除浮動將清除項目到邊緣邊緣，而清除項目將確保所有浮動的子項都被正確包含。

Float輸出遵循不同的心智模式，其中一個走過網格的一行，因此會自動清除您的浮動。如果您希望使用Float輸出風格作爲默認值，只需在調用網格之前將$output: 'float'添加到您的Sass文件中即可。這將改變你的全局輸出風格上下文。或者，您可以使用float-span來使用Float輸出樣式心智模型並按需輸出而不是grid-span，或者將$output-style: 'float'作爲grid-span的選項進行傳遞。

看一看的文檔Output Styles，Output Span，Float Span和Context Overrides in grid-span爲更加深入地瞭解奇點提供不同的輸出方式和選項。

來源

2013-04-30 16:31:13 Snugug

這是一個老問題，但我剛碰到這個問題。 Snugug的答案非常完美，但我想展示爲我工作的代碼。（不能把代碼中的註釋）

//主要內容容器

.l-main { 
    @include breakpoint(80em) { 
    @include grid-span(16, 3, 20); 
    } 
}

//全寬內容容器內的一面旗幟。我需要清除它，因爲橫幅上方和下方還有其他幾個較小的列/網格。

.b-banner { 
    @include breakpoint(80em) { 
    @include float-span(16, 1, last); 
    } 
}

來源

2014-10-17 16:33:57 C13L0

與奇點重疊的塊元素

回答

相關問題