Не удалось очистить два сложенных Singularity изоляции большепролетных коробки иначе фланговые коробки перемещаются

Question

я построил следующий тестовый случай: http://www.sassmeister.com/gist/9127157

Проблема, как только компоновочных переключается на три колонки (начиная с п.о. 1075px), мне нужно переключить поляризацию для классов .После этого и .newsletter ни в коем случае не следует фланкировать поля .contact и .thanks. Но теперь поле .newsletter укладывается над полем .follow.

Есть ли способ решить эту проблему только с помощью CSS (я попробовал clearfix mixins, но не повезло), или это оболочка div в разметке html, необходимая для двух классов .newsletter и .follow? У меня нет идей. . :(

Заранее спасибо Ralf

Answer 1

К сожалению, способ, который плавает работу, это в настоящее время не представляется возможным с HTML вы, к счастью, исправить это довольно просто: оберточной <div>

Проверить вне updated SassMeister gist для полного решения.

в принципе, то, что вам нужно сделать для достижения этой цели является обернуть .follow и .newsletter в оберточную DIV, который не имеет никаких свойств, пока ваша точка останова, где нужны эти две вещи сложены в середине. Тогда , вместо используя Singularity для размещения этих предметов, они просто на 100% ширины, с .follow плавающие либо left, либо right, с .newsletter, очищающими направление, которое плавало .follow (или both). Наконец, используйте Singularity для размещения содержащего <div>. Это уложит их внутрь этой области и позволит нормально расположить .contact и .newsletter.