Несемантическая структура CSS - выравнивание столбцов и связывание элементов ⇐ CSS

[Anonymous]

Я использую структуру Unsemantic CSS Grid для создания макета, который выглядит примерно так (упрощено, чтобы прояснить вопрос):




Здесь вы видите 3 строки, в каждой по 2 столбца. Код выглядит примерно так:

Код: Выделить всё

Title 1

Title 2



[img]image1.png[/img]

[img]image2.png[/img]



Text paragraph here

Another paragraph of text

Самое замечательное в использовании трех строк заключается в том, что даже если изображение 1 и изображение 2 имеют разную высоту, абзац текста под ними выравнивается по двум столбцам (то есть он начинается с одинаковой вертикальной позиции в обоих столбцах), поскольку я использую «очистить» после изображений. Если бы вместо этого я использовал одну строку с двумя столбцами, где каждый столбец представляет собой элемент div с заголовком, изображением и текстом абзаца друг над другом, тогда текст абзаца не выровнялся бы, если изображения имели разную высоту. Таким образом, использование трех строк дает мне именно то, что я ищу.

К сожалению, при просмотре на мобильном устройстве происходит вот что:




Это потому, что два столбца каждой строки оказываются поверх каждого другое.

Вместо этого я хотел бы получить следующее:




Другими словами, я хочу, чтобы row1col1, row2col1 и row3col1 склеились вместе, а затем row1col2, row2col2 и row2col2 появится ниже.

Как мне это сделать? Есть ли что-нибудь в Unsemantic, что позволяет мне «связать» столбец вместе?

Если вместо этого я создам 2 элемента div с заголовком, изображением и текстовым параметром и помещу их в 1 строку, это решит эту проблему, но тогда текстовые абзацы НЕ будут выстраиваться в линию, если изображения имеют разную высоту. Я не могу жестко закодировать высоту, потому что это гибкий макет, и когда ширина страницы изменится, изменится ширина столбцов, что, в свою очередь, изменит ширину изображений (поскольку их ширина установлена ​​на 100% контейнера) и, следовательно, изменится их высота. Любые трюки, обходные пути или предложения, позволяющие заставить этот подход работать, будут очень полезны.

В крайнем случае я подумываю об использовании jQuery для позиционирования текста абзаца при изменении размера страницы; если вы считаете, что это хорошее решение (или единственное решение), поделитесь своими рекомендациями или подводными камнями, на которые следует обратить внимание при таком подходе.

Подробнее здесь: https://stackoverflow.com/questions/291 ... e-elements