表示を使用する際の垂直方向の配置の問題を解決する方法: 列のインラインブロック?

Display Inline-Block Columns: 垂直方向の配置の問題の解決

display: inline-block を利用して複数の列を構築する場合、次の点に対処することが重要です。コンテンツの追加時に発生する可能性のある垂直方向の配置の問題。

根本的な原因は、インライン要素のデフォルトの垂直方向の配置にあります。これを修正するには、vertical-align: top; を適用します。 inline-block 要素へ:

.cont span {
    display: inline-block;
    vertical-align: top;     /* Aligns columns vertically at the top */
    height:100%;
    line-height: 100%;
    width: 33.33%;           /* For demonstration purposes only */
    outline: 1px dashed red; /* For demonstration purposes only */
}

これにより、各列のコンテンツの高さに関係なく、すべての列が垂直方向の配置を維持します。

列には inline-block を使用できます。開発者の中には、インライン ブロックに固有の空白スペースがあるため、フロート、フレックスボックス、CSS グリッドなどの代替方法を好む人もいます。

垂直方向の配置テクニックを理解し、代替レイアウト オプションを検討することで、効果的にマルチを構築できます。 -display: inline-block またはその他の適切なメソッドを使用した列構造。

以上が表示を使用する際の垂直方向の配置の問題を解決する方法: 列のインラインブロック?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。