Drop float - основной вопрос о размещении CSS

Question

Я борюсь с разочаровывающей и глубоко базовой проблемой CSS, которая проиллюстрирована на диаграмме ниже, и js fiddle here. Я пытаюсь достичь макета жидкой сетки с плавающими блочными элементами, определенными процентной шириной и различной высотой, которые линеаризуют - то есть изменяются на width: 100% на определенной точке останова (в скрипте есть медиа-запрос @ 768px max-width.) Обратите внимание, что мне нужны блоки для линеаризации таким образом, чтобы «переплетать» две основные колонии вместе, как показано на скрипке. У меня возникла проблема с тем, что плавающие элементы «отбрасываются» и не выравниваются по вертикали по желанию - как указано блоком «news/speaking» на моей диаграмме.

Я пробовал все Кладку тип JQuery плагин я могу найти, и ни один из них не кажется, выполняет в последовательном или надежном способе, с жидкостными раскладками. Я также знаю метод inline-block, но причуды/ограничения создают свои проблемы. Кроме того, flexbox выглядит фантастически, но текущая ограниченная поддержка является проблемой для этого проекта в частности.

Я открыт для подхода, основанного на jquery, то есть заставляя определенные блоки выравниваться по дну других, но предпочитает использовать css-based. Я понимаю, что всегда могу применить отрицательный запас к элементам «dropping», но это не очень изящное решение.

Любая помощь с этой проблемой «поплавок» наиболее ценится.

Answer 1

Я не уверен, какие «причуды/ограничения» вы используете в использовании inline-block, но если вы примените его только к .item.w1, это, похоже, сработает.

Вам также необходимо удалить float: none здесь:

@media only screen 
and (max-width : 768px) 
and (orientation : portrait) { 
    .item.w1, .item.w2 { 
    float: none; 
    width: 100%; 
    } 
} 

Fiddle