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. Media Queriesの@media
  2. littlebox

    CSS

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

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

  3. CSSだけで実装できるスニペット

    CSS

    CSSのコードだけで実装できるWebデベロッパーのための28のスニペット

    とてもよさそうなまとめですね。CSSのコードだけで実装できるWebデベ…

  4. CSS

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

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

  5. CSS

    CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  6. Epic Spinners

    CSS

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

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

コメント

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

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

最近の記事

  1. エチオピア
  2. 紗々 飴色和栗
  3. DCG-CA21
  4. Apple WatchでのMacロック解除を無効
  5. オータムスイートポテトフラペチーノ

アーカイブ

PAGE TOP