2014-02-21 32 views
0

我已經建立了下面的測試案例:http://www.sassmeister.com/gist/9127157無法清除,否則兩個堆疊奇異隔離跨度箱側翼盒送移動

問題是,一旦佈局切換到三列(在BP開始1075px)我必須將類的清除.follow和.newsletter切換爲none,否則側翼框.contact和.thanks會被推送。但是現在.newsletter框被堆疊在.follow框之上。

有沒有一種方法可以解決這個問題,只是用CSS(我試過clearfix mixins,但沒有運氣),或者是兩個類.newsletter和.follow所需的html標記中的包裝div。我沒有想法。 。:(

在此先感謝拉爾夫

+0

該鏈接似乎已損壞,您可以嘗試重新保存嗎? – Snugug

+0

奇怪,抱歉...創建一個新的要點:https://gist.github.com/rpkoller/9133595 – rpk

+0

http://sassmeister.com/gist/9133595和某種方式sassmeister無法處理scss到一個CSS,總是返回無效的空操作:「null minus 1」。我可能會在我的Dropbox上上傳一個示例項目並將其鏈接。 – rpk

回答

1

不幸的是,漂浮的工作方式,這是目前無法與你有HTML幸運的是,解決方法是相當簡單:一個包裝<div>

檢查出updated SassMeister gist了完整的解決方案。

基本上,你需要做的,做到這一點是包裹.follow.newsletter在沒有屬性,直到你的斷點包裝DIV,你需要堆放在中間的這兩個項目的,然後, 代替使用奇點定位這些項目,它們只是100%寬度,其中.follow浮動leftright.newsletter清除.follow浮動的方向(或both)。最後,使用Singularity來定位包含<div>。這會將它們堆疊在該區域內並允許.contact.newsletter正常放置。

+0

ahhhhhhh brillian非常感謝!已經猜到了包裝div的解決方案,但我之前在測試中丟失了一半。我在div中爲.follow和.newsletter做了造型。現在一切都像魅力一樣工作。非常感謝!!!我越來越多的挖奇點的方法。太好了! – rpk