Unsemantic CSS Grid フレームワークを使用して、次のようなレイアウトを作成しています (質問を明確にするために簡略化しています)。
ここで見ているのは、それぞれが 2 列の 3 つの行です。コードはおおよそ次のようになります。
<!-- First row -->
<div class="grid-50">
Title 1
</div>
<div class="grid-50">
Title 2
</div>
<div class='clear'></div>
<!-- Second row -->
<div class="grid-50">
<img src='image1.png' />
</div>
<div class="grid-50">
<img src='image2.png' />
</div>
<div class='clear'></div>
<!-- Third row -->
<div class="grid-50">
Text paragraph here
</div>
<div class="grid-50">
Another paragraph of text
</div>
<div class='clear'></div>
3 行を使用することの優れた点は、画像 1 と画像 2 の高さが同じでなくても、それらの下のテキストの段落が 2 つの列にまたがって整列することです (つまり、両方の列で同じ垂直位置から開始されます)。画像の後の「クリア」。代わりに、2 列の 1 つの行を使用した場合、各列はタイトル、画像、段落テキストが上下にある div であり、画像の高さが異なると段落テキストは整列しません。したがって、3行を使用すると、探しているものが正確に得られます。
残念ながら、モバイル デバイスで表示すると、次のようになります。
これは、各行の 2 つの列が互いに重なってしまうためです。
代わりに取得したいのはこれです：
つまり、row1col1、row2col1、row3col1 をくっつけてから、row1col2、row2col2、row2col2 を下に表示します。
どうすればこれを行うことができますか？Unsemantic で、列を「結び付ける」ことができるものはありますか?
代わりに、タイトル、画像、テキスト パラで 2 つの div を作成し、それらを 1 行に配置すると、この問題は解決しますが、画像の高さが異なる場合、テキスト パラグラフは整列しません。これは流動的なレイアウトであるため、高さをハードコーディングすることはできません。ページの幅が変更されると、列の幅が変更され、画像の幅が変更されます (幅がコンテナーの 100% に設定されているため)。 ) その結果、それらの高さが変化します。このアプローチを機能させるためのトリック、回避策、または提案が最も役立ちます。
最後の手段として、ページのサイズ変更時に jQuery を使用して段落テキストを配置することを考えています。それが良い解決策 (または唯一の解決策) だと思われる場合は、このアプローチで注意すべき推奨事項や落とし穴を自由に共有してください。