ホーム(記事一覧)へ

CSSで横並びして下揃えする方法

「横並びしてそれを下揃えにしたいんだけどどうやるの?」

CSSで横並びして下揃えする方法を解説します。

【方法1】display:flexとalign-items:flex-endを指定




<style>
.example{
    /*コレ*/display: flex;
    /*コレ*/align-items: flex-end;
    border: 1px solid #999;
    background: #ffeded;
    padding: 10px;
}
.example>div{
    border: 1px solid #999;
    background: #bad7f0;
    padding: 10px;
    width: 100px;
}
</style>
<div class="example">
    <div>左<br>左<br>左<br>左</div>
    <div>右</div>
</div>

「display:flex」は子要素の位置を調整できるCSSです。これを使うとカンタンに横並べができます。

「align-items」はflex内の子要素のの位置を調整するCSSです。

「align-items: flex-end」を指定すると下揃えにできます。

display:flexについてもっと詳しく知りたいかたはこちら↓

【方法2】display:inline-blockを指定




<style>
.example2{
    border: 1px solid #999;
    background: #ffeded;
    padding: 10px;
}
.example2>div{
    /*コレ*/display: inline-block;
    border: 1px solid #999;
    background: #bad7f0;
    padding: 10px;
    width: 100px;
}
</style>
<div class="example2">
    <div>左<br>左<br>左<br>左</div>
    <div>右</div>
</div>

「display:inline-block」はブロック要素とインライン要素両方の特徴を合わせ持つようにさせるCSSです。

横並べさせつつwidthを指定することなどができます。

ただし、インラインの特性上左右に隙間ができてしまいます。これはhtmlソースの空白も詰めてしまうと消すことができますが、やっかいと感じるのであればflexの方法をおススメします。

inline-blockはもともと下揃えする特徴があります。

厳密に言うとベースライン(文字のライン)がそろっており、padding-bottomが違うと下揃えにならないので注意です。

【まとめ】横並びして下揃え

  • 【オススメ】display:flexとalign-items:flex-endを指定
  • display:inline-blockを指定

以上、CSSで横並びして下揃えする方法でした。

関連記事