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

SUGOYOKU BLOG

福岡のホームページ、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>

</div>

</div>

CSS

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

.red,.blue{
     float:left;
}

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

.main {

width:100%;

margin:0 auto;

position:relative;

}

.red,.blue{

float:left;

}

.blue p {

position:absolute;

bottom:0;

}

これでfloat後のテキストを下に揃えることができます。レスポンシブで可変についてくるようにするには、今のところこのやり方しか思いついていません。勉強中の方やこれ以外にもあって知ってるよというかたは是非お教えください。

ちょこっとメンターサービス

HP無料診断

【実践マーケティング手法２２選】無料ダウンロード

助成金・補助金・融資・M＆A等の総合経営支援サービス
「補助金パートナー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。

福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

SUGOYOKU BLOG