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

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

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

  2. CSS

    CSS3でシンプルで簡単なボタンを作ってみる

    CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSS…

  3. 背景画像のロゴをRetinaに対応させるCSS

    CSS

    背景画像のロゴをRetinaディスプレイに対応させるCSSのやり方

    背景画像のロゴをMacのRetinaディスプレイに対応させるCSSのや…

  4. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  5. littlebox

    CSS

    CSSだけで作られたシンプルで可愛いアイコンセット「littlebox」

    littleboxは画像を用いずにCSSだけで作られたシンプルなアイコ…

  6. 動画をレスポンシブにするCSS

    CSS

    動画をレスポンシブに対応させるCSSのTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

コメント

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

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

最近の記事

  1. 生ハム&モッツァレラチーズ サラダラップ
  2. コガネムシ
  3. ショルダーハム&5種の野菜サンドイッチ
  4. ジョン・リーチ マグカップ
PAGE TOP