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でした。使い方によってはキレイなレイアウトを作ることができるの覚えておいて損はないですね。こういう細かい部分を調整できるやり方は個人的にはとても重宝しますので、今後も機会があれば記事にしていきたいと思っています。

Draftpadのアシスト機能を使えばEvernoteやDropboxはもちろん、するぷろ for iPhoneにも送ることができる前のページ

デザインもシンプルで素敵なレスポンシブのjQueryスライダー「Blueberry」を使ってみた次のページ

関連記事

  1. CSS

    ulのリストを横並びにしてtext-alignを適用させる方法

    ちょっと悩んじゃいました。ulのli要素を横並びにしてそれにtext-…

  2. CSS Only Fab Icon Menu

    CSS

    CSSで実装できるコンパクトで可愛いメニュー「CSS Only Fab Icon Menu」

    CSS Only Fab Icon MenuはCSSによるコンパクトで…

  3. CSS

    WebデザインのためCSSエフェクトを実装できる5つのライブラリ

    とても役立ちそうなまとめだったのでメモがてらご紹介します。Webデザイ…

  4. CSS

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

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

  5. CSS

    CSSを使って画像にホバーするとキャプションを表示させるエフェクト

    CSSを使ったホバーエフェクトがとてもよかったのでご紹介します。画像に…

  6. CSSグラデーションジェネレーター「Gradientoo」

    CSS

    直感的な操作感!CSSグラデーションを作成できるジェネレーター「Gradientoo」

    CSSのグラデーションを作成できる素敵なジェネレーター「Gradien…

コメント

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

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

最近の記事

  1. King クリーニングティッシュ
  2. PDA-STN36S
  3. クッキー&クリーム ポップコーン
  4. マウイチップス マウイオニオン味
  5. グリーンビーントゥーバー

アーカイブ

PAGE TOP