2011.04.05xoopsズープス

リストタグで横並びにして、かつ、フロート(回り込み)を解除する方法(崩れる 対処法)

フロートをかけたときに、フロートをかけたい箇所が終わっても回り込みが発生して、レイアウトが崩れることがあります。その際に 終わった個所で、 <br style="float:clear"> と記入してフロートを解除する方法もありますが、 下記のような clearfix というCSSを利用して、 float をかける要素に、 2つめのCSSとしてclearfix をかける対処法を紹介いたします。

CSS側

.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

.clearfix{
    overflow: hidden;
    display:inline-block;
}

aaa ul li{float:left
width:100px}

HTML側

<div class="keitai clearfix">
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>
</div>


このカテゴリの人気記事



  • コメント (0)
  • トラックバック (0)
  • 閲覧 (14282)

トラックバック

トラックバックpingアドレス http://www.suehirogari.com/modules/blog/tb.php/180

コメントの投稿

コメント投稿に関するルール : コメントは全て承認が必要
新着記事一覧

キーワードでサイト内を検索
人気のエントリ