広告2つ横並びをCSSのdisplay:table-cellで配置!Bootstrapのpull-left(rigth)から変更

スポンサーリンク

ブログのスタイル調整メモです。このブログはBootstrap3で作成(中)なんですが、記事下の広告2つ横並び(ダブルレクタングル)をBootstrap3のpull-left(rigth)で配置していました。でもCSSのdisplay:table-cellを利用した方がいいみたいです。

広告2つ横並びをCSSのdisplay:table-cellで配置

Livedoorブログ(PREMIUM)からWordPressに返り咲いて早くも3週間が経過しています。テーマがちょっぴりダサいですが、簡単にレスポンシブデザインを作成できるTwitter Bootstrap3の力をかりてなんとか公表できるまでになりました。

見てのとおり記事下にはレスポンシブ対応の広告ではなく、レクタングルを2つ並べたものにしています。

横並びCSSといえばfloatなんですが、Bootstrapにはpull-left(rigth)で横並びにして左寄せ、右寄せが可能です。しかし、メイン(col-md-8)の横幅が645px近辺になると段違いで以下にように落ち込み、見栄えがよくありません。PCでもタブレットでもこの付近で閲覧しているユーザはかなりいると思います。

image

そこで、display:table-cell という横並びCSSを利用すると均等に横並びになり、見栄えが良くなりました。

image

CSSは以下のように、クラスを適当に命名して記述しました。

ul.ad-ul{
display:table;
table-layout: fixed;
width:100%; 
}
li.ad-li{
display:table-cell;
}

HTMLはsingle.phpの記事本文下に以下のようにマークアップ。

<ul class="ad-ul">
<li class="ad-li">
<!-- 広告 左 -->
</li><!-- class="ad-li"-->
<li class="ad-li">
<!-- 広告 右 -->
</li><!-- class="ad-li"-->
</ul><!--class="ad-ul"-->

レスポンシブデザインの場合は広告に神経使いますね。なお、このCSSはIE6/7は未対応なのでご注意ください。ただし、IE6/7対策を施していれば大丈夫かなと思いますが・・・?。

今回お世話になったのは以下のサイトです。

HTML5&CSS3の概要を学びたいなら、以下の参考書は超おススメです。私もかなりお世話になっています。

スポンサーリンク

シェアする

フォローする

関連記事