問題タブ [unsemantic-css]

フレームワーク「非セマンティック」を使用します。4 列のグリッドを作成するときに、グリッドのすべての要素の高さが同じでない場合、ウィンドウを縮小すると (3 番目のブロックから) グリッドが壊れます。

ここを参照してください http://cemf.fr/lpem/paul-meyer/

誰でもこれを修正する方法を知っていますか?

HTML :

Unsemantic CSS Grid フレームワークを使用して、次のようなレイアウトを作成しています (質問を明確にするために簡略化しています)。

ここで見ているのは、それぞれが 2 列の 3 つの行です。コードはおおよそ次のようになります。

3 行を使用することの優れた点は、画像 1 と画像 2 の高さが同じでなくても、それらの下のテキストの段落が 2 つの列にまたがって整列することです (つまり、両方の列で同じ垂直位置から開始されます)。画像の後の「クリア」。代わりに、2 列の 1 つの行を使用した場合、各列はタイトル、画像、段落テキストが上下にある div であり、画像の高さが異なると段落テキストは整列しません。したがって、3行を使用すると、探しているものが正確に得られます。

残念ながら、モバイル デバイスで表示すると、次のようになります。

これは、各行の 2 つの列が互いに重なってしまうためです。

代わりに取得したいのはこれです：

つまり、row1col1、row2col1、row3col1 をくっつけてから、row1col2、row2col2、row2col2 を下に表示します。

どうすればこれを行うことができますか？Unsemantic で、列を「結び付ける」ことができるものはありますか?

代わりに、タイトル、画像、テキスト パラで 2 つの div を作成し、それらを 1 行に配置すると、この問題は解決しますが、画像の高さが異なる場合、テキスト パラグラフは整列しません。これは流動的なレイアウトであるため、高さをハードコーディングすることはできません。ページの幅が変更されると、列の幅が変更され、画像の幅が変更されます (幅がコンテナーの 100% に設定されているため)。 ) その結果、それらの高さが変化します。このアプローチを機能させるためのトリック、回避策、または提案が最も役立ちます。

最後の手段として、ページのサイズ変更時に jQuery を使用して段落テキストを配置することを考えています。それが良い解決策 (または唯一の解決策) だと思われる場合は、このアプローチで注意すべき推奨事項や落とし穴を自由に共有してください。

CSS/SASS コメントに視覚的な違いを追加して、現在作業中のファイルの山を急いで調べたときにすぐに気付くことができるようにするというアイデアがありました。だから私は、なぜdingbatsを使わないのかと思った.あなたのコードにはそのようなものは見られないので、それを使い始めてみませんか?

たとえば、このクロス記号は次のとおりです。

私の質問 - CSS/SASS や JS でdingbatsを使用すること、またはそのようなコード コメントを使用することは意味的に間違っていますか?

SASSはこれを気にしていないようです。ページもきちんと読み込まれます。

ただし、 OCDの人向けではありません。