インラインブロックの列を垂直方向に整列させるにはどうすればよいですか?

インラインブロック列の垂直方向の配置

display:inline-block を使用して列を作成すると、コンテンツが追加されるときに次のようになります。最初の列までは、後続の列が垂直に下降します。これは、CSS のvertical-align プロパティを利用することで解決できます。

この問題を回避するには、vertical-align: top; を追加します。コンテナのCSS宣言に追加します。これにより、各列の内容に関係なく、すべての列が上部で垂直方向に整列します。

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

代替アプローチ

ただし、インライン ブロックは次の目的で使用できます。列を作成する場合、列間の潜在的な空白の問題により、最適な解決策ではない可能性があります。列のレイアウトと配置をより詳細に制御できるため、代わりにフレックス ボックスまたは CSS グリッドの使用を検討してください。

以上がインラインブロックの列を垂直方向に整列させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。