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

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

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

その後に

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

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

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;
}