次のテスト ケースを作成しました: http://www.sassmeister.com/gist/9127157
問題は、レイアウトが 3 列 (bp 1075px から開始) に切り替わるとすぐに、クラス .follow と .newsletter のクリアを none に切り替える必要があることです。しかし今、.newsletter ボックスは .follow ボックスの上に積み上げられています。
CSS だけでその問題を解決する方法はありますか (私は clearfix mixins を試しましたが運がありません)、または .newsletter と .follow の 2 つのクラスに必要な html マークアップのラッピング div はありますか? 私はアイデアがありません。:(
前もってありがとうラルフ
残念ながら、フロートが機能する方法は、現在あなたが持っている HTML では不可能です。幸いなことに、修正は非常に簡単<div>です。
完全なソリューションについては、更新された SassMeister gistを確認してください。
基本的に、これを達成するために行う必要があるのは、ラップ.followであり.newsletter、これらの 2 つの項目を中央に積み重ねる必要があるブレークポイントまでプロパティを持たないラッピング div です。次に、Singularity を使用してこれらのアイテムを配置する代わりに、単純に 100% 幅で、または の.followいずれleftかをフローティングさせ、フローティングした方向rightを.newsletterクリアします.follow(またはboth)。最後に、Singularity を使用して含む を配置し<div>ます。これにより、その領域内にアイテムがスタックされます。正常に配置できるよう.contactにします。.newsletter