「display: inline-block」を使用するときに列を整列させておくにはどうすればよいですか?

Display: Inline-Block を使用した列の配置の維持

複数列のレイアウトに display: inline-block を使用する場合は、考慮することが重要ですコンテンツが列のいずれかに追加されると列が下に移動する問題。このレイアウトの乱れは、vertical-align プロパティを使用して列を上部で垂直に整列させることで解決できます。

vertical-align: top; を組み込むことで解決できます。 CSS 宣言に組み込むと、各列に追加されたコンテンツに関係なく、列が必ず上部に配置されます。これにより、レイアウトの残りの部分が影響を受けるのを防ぎ、目的の水平方向の配置が維持されます。

vertical-align プロパティを含む拡張コード サンプルが含まれています。

.cont span {
    display: inline-block;
    vertical-align: top;     /* Vertically align the inline-block elements */
    height:100%;
    line-height: 100%;
    width: 33.33%;           /* Just for Demo */
    outline: 1px dashed red; /* Just for Demo */
}

表示中に次の点に注意してください。 : inline-block は列レイアウトに使用できます。フレックスボックスや CSS グリッドなど、より現代的で柔軟なオプションも利用できます。これらのアプローチは、複数列の配置を作成するためのより優れた制御とより効率的なソリューションを提供する可能性があります。

以上が「display: inline-block」を使用するときに列を整列させておくにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。