【忘備録】float後にdiv要素のテキストを下揃えにする方法

福岡のホームページ、SEO対策の株式会社スゴヨクです。

今回は少し考えたfloat後のdiv要素のテキストを下揃えにする方法の忘備録になります。

floatでまずは横に並べますね。

ホームページ 制作 料金 福岡 float

その後に

ホームページ 制作 料金 福岡 float

外にmainの要素にposition:relative;をかけます。

position:relative;で相対位置を決めます。
次に絶対位置として
position:absolute;とbottom:0;で位置を決めていきます。

ホームページ 制作 料金 福岡 float

HTML

<div class="main">
 <div class="red">
  <p>字A</p>
 </div>
 <div class="blue">
  <p>文字B</p>
 </div>
</div>

CSS

.main {
     width:90%; 
     margin:0 auto;
     position:relative;
}

.red,.blue{
     float:left;
}

.red p {
     position:absolute;
     bottom:0;
}

これでfloat後のテキストを下に揃えることができます。
レスポンシブで可変についてくるようにするには、今のところこのやり方しか思いついていません。

勉強中の方やこれ以外にもあって知ってるよというかたは是非お教えください。