CSS

CSSのfloatで回り込みさせたテキストを画像や要素の下に回り込ませないやり方

ちょっとしたCSSのTipsです。結構使う機会があるのでメモがてら残しておきます。CSSでfloatしてテキストを回りこみさせた時に、floatを指定した要素の下側にまで回り込ませないやり方です。これを覚えると色んなところで活用できるのでとても便利です。ということでサンプルと合わせてどうぞ。

floatで文字を下側にだけ回り込ませない

CSSのfloatで下に回り込ませない01

上記画像のように、floatするとテキストが画像下にまで回り込んできます。で、これを以下の画像のように、下側だけ回り込ませないようにするやり方です。

CSSのfloatで下に回り込ませない02

以下コードです。

HTML

<div id="sample">
    <img src="sample.jpg">
    <p>サンプルテキスト...</p>
</div>

こんな感じのHTMLがあったとして、imgにfloatを指定したとします。で、このままだと画像の下側にまでテキストが入ってくるので、floatされたp要素にoverflow:autoを指定してあげます。

CSS

#sample img {
    float: left;
    margin-right: 10px;
}
#sample p {
    overflow: auto;
}

これだけで画像の下にテキストが入ってこなくなりました。便利ですね。

画像以外にもよく使いそうな機会

画像以外でもよく使われそうなものとして、新着情報の日付とタイトルの一覧などがありますね。こんな感じのやつ。

CSSのfloatで下に回り込ませない03

これも普通にfloatするだけだと、日付の下までテキストが回り込んでしましますが、overflow:autoを指定することで下側には回り込ませないように見せることができます。こちらの方がキレイに見えますね。

HTML

<div id="sample">
    <h3>新着情報</h3>
    <ul>
        <li><span>2012年1月1日</span><a href="#">サンプルテキスト...</a></li>
        <li><span>2012年1月2日</span><a href="#">サンプルテキスト...</a></li>
        <li><span>2012年1月3日</span><a href="#">サンプルテキスト...</a></li>
        ....
    </ul>
</div>

日付をspanで括り、floatを指定します。a要素にoverflow:autoを指定して、2行以上になった時に日付の下に回り込まないようにしています。

CSS

#sample ul li span {
    display: block;
    float: left;
}
#sample li a {
    display: block;
    overflow: auto;
}

終わりに

ということで、floatした要素を下側に回り込ませたくない場合に使えるTipsでした。使い方によってはキレイなレイアウトを作ることができるの覚えておいて損はないですね。こういう細かい部分を調整できるやり方は個人的にはとても重宝しますので、今後も機会があれば記事にしていきたいと思っています。

関連記事

  1. CSS

    CSSだけを使ったストライプ(斜め・水平・垂直など)の作り方

    CSSだけを使ったストライプの作り方「Stripes in CSS」が…

  2. CSS3を使ったツールチップ

    CSS

    CSS3を使ってアニメーションするツールチップを実装するコード

    これすごくよかったのでメモがてらエントリー。CSS3を使ってアニメーシ…

  3. Light Modal

    CSS

    パワフルでカスタマイズ性に優れたCSSモーダル「Light Modal」

    Light Modalは、軽量・パワフルでカスタマイズ性に優れたCSS…

  4. Ember Burger Menu

    CSS

    豊富なアニメーションを有するハンバーガーメニュー「Ember Burger Menu」

    Ember Burger Menuは、豊富なアニメーションを有するカス…

  5. CSSで可変式ドロップダウンメニュー

    CSS

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみた

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみました。…

  6. Epic Spinners

    CSS

    CSSによる素敵なスピナーコレクション「Epic Spinners」

    Epic SpinnersはCSSで作成された素敵なスピナーコレクショ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP