Web

floatを他の要素に頼らず解除する

floatを他の要素に頼らず解除する

 トップの更新情報5件の下から全ての更新履歴を表示するページへのリンクをつけました。
 ついでに更新情報一覧ページの表示を変えました。タイトルとサムネイルだけ表示します。
 更新情報に加えておこうかと思ったけどたいした変更でもないしやめておきます。

 その変更した更新履歴一覧ページの表示で使っている、タイトルの「floatを他の要素に頼らず解除する」方法についてです。

 アサノさんのサイト、「Mushline」でこういう感じな表示をなさっていて、これってどうやってるんだろーとCSSを覗いてみてこのコードにどえらく感動しました。

.metadata dl:after{
  display: block;
  height: 0px;
  clear: both;
  content: "";
}

 要素をfloatさせたあとって、どの要素でそのfloatを解除させようかいつも考えるところだったんですが、:afterで解決する方法とか考えもつかなかったです。擬似的にブロック要素を作ってそこでfloat解除するんですね。スゴイ!
 IEには効かないんですが、IEはもともとfloatされていようが何だろうか中に入っているもののが入るサイズを勝手に計算してくれるやつなのでまあいいとしよう。paddingの影響も受けてくれるともっといいのに…。

この記事のタグ

この記事を評価

1ツ星2ツ星3ツ星4ツ星5ツ星 (まだ評価されていません)
読み込み中 ... 読み込み中 ...

Comments:0

Leave a Reply

コメントフォーム
強調 文字を強調します。
引用 文章を引用する場合に使います。
ソースコード 数行以上にわたるソースコードの作成に使います。インデントが反映されます。特殊文字 & < > " ' - を エスケープしてソースコード用セクションを作成します。
エスケープ 特殊文字 & < > " ' - を &#38; &#60; &#62; &#34; &#39; &#45; に置換します。
上記のソースコード用セクションは数行のコードを綺麗に表示するためにありますが、こちらは一単語などの短い範囲の場合に。特殊文字を使いたい場合にもどうぞ。
タグを閉じる 開いているタグを全て閉じます。
※タグの不整合やXHTML1.1に準拠しない場合は管理者で訂正する場合があります。
 投稿者情報を保存  

Trackbacks:0

このエントリーにトラックバックするためのURL
http://lovingcat.net/2007/12/18/release-float-hack/trackback/
Listed below are links to weblogs that reference
floatを他の要素に頼らず解除する from LOVING CAT
Blog Archives
Feeds
Tag Cloud
Xbox LIVE Gamercard
評判:nsSaico評判 :
785ゲーマースコア :
レクリエーションゾーン :