一貫したレイアウトを実現するためにインラインブロック列を垂直方向に揃えるにはどうすればよいですか?

Barbara Streisand
リリース: 2024-11-05 21:13:02
オリジナル
776 人が閲覧しました

How to Vertically Align Inline-Block Columns for Consistent Layout?

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

インライン ブロックを使用して列を作成する場合、列が下にシフトするという課題に対処することが重要です最初の列にコンテンツが追加されました。この問題を解決するには、適切な垂直方向の配置を確保する必要があります。

解決策は、CSS 宣言を追加して上部の列を垂直方向に配置することです。

.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 */
}
ログイン後にコピー

これにより、さまざまな値であっても、

インラインブロックには欠点もありますが、単純な列を作成するには効果的なオプションです。ただし、より高度な列レイアウトには、フレックスボックスまたは CSS グリッドの使用を検討してください。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート