大阪のホームページ制作会社 株式会社TREVO
技術ブログ

CSSで横並びのボックスの高さを揃える方法

2019.12.03.

CSS

twitter Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

コンテンツ内容の異なるボックスを横並びに配置するとボックスの高さ異なるので下辺が揃わずバラバラになります。
Flexboxを使うことによって高さを揃えることがきます。

Flexboxでの設定

html

<div class="sample">
 <div class="box">
 ボックス1の内容
 </div>
 <div class="box">
 ボックス2の内容、ボックス2の内容、ボックス2の内容
 </div>
 <div class="box">
 ボックス3の内容、ボックス3の内容、ボックス3の内容、ボックス3の内容、ボックス3の内容、ボックス3の内容、
 </div>
</div>

CSS

.sample{
 display:flex;
}
.box{
 width: 20%;
 margin: 1%;
 border:1px solid #ccc;
 background-color: #ddd;
}

結果

ボックス1の内容
ボックス2の内容、ボックス2の内容、ボックス2の内容
ボックス3の内容、ボックス3の内容、ボックス3の内容、ボックス3の内容、ボックス3の内容、ボックス3の内容、

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

twitter Facebook Pocket LINE はてブ
お見積もり