タグ

floatに関するharu135のブックマーク (5)

  • floatを解除する手法のclearfix と 次世代のレイアウトの話

    floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな

    floatを解除する手法のclearfix と 次世代のレイアウトの話
  • FireFox 印刷の不具合の解消-まとめ - MOREiの日記

    コーディングに印刷対応の案件が入り、 ver.3.xの不具合などを調節するために、調べました。 ver.4.0では、バグ(?)が解消されているようです。 ■カラム落ちする・重なるなど ・フロートしているBOX要素をテーブルへ設定 その他は必要に応じて微調節を。 ・重なっていた要素 フロートしているBOX要素を設定すると、 その下部に配置していた要素は元の設定どおりになります。 戻らない場合は、テーブルへ設定する要素を再検証してみる必要があります。 (私の場合は、きちんとした箇所を探すことで解消できました) div#contents { display:table; } div#contents #leftBlock { display:table-cell; width:○px; float:none; vertical-align:top; } div#contents #rightBl

    FireFox 印刷の不具合の解消-まとめ - MOREiの日記
  • HugeDomains.com

    Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing

  • clearfixでfloatを解除 | d-spica

    clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり,途中で切れたりしたことはありませんか。 floatした要素(ボックス)を含む親要素(ボックス)のborderやbackgroundが途中で切れてしまうことがあります。 左の例では,右側のメニューが終わったあたりで,左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;

  • MdN Design|総合情報サイト

    第16回(最終回) 最新のデザイン表現を適用する ここまで紹介してきたCSSのレイアウトや装飾テクニックは、現在利用者の多いInternet Explorer 7や8、Safari、FirefoxなどのWebブラウザでほぼ問題なく動作するものでした。連載の最終回は、未来に向けた準備として現在策定中の「CSS 3」の中からモダンブラウザで既に適用可能なスタイルをいくつか紹介します。 (公開日:2010年4月16日 解説:こもりまさあき) 現在策定中のCSS 3について CSSで指定したスタイル指示は、WebブラウザのCSSサポートの度合いによって適用できるかどうかが異なります。例えば、今現在の主流であるブラウザの多くではCSSレベル2(CSS 2)をサポートしているものがほとんどです(特定のプロパティだけ未サポートも含め)。その一方、現在CSSの次のバージョンにあたるCSSレベル3(CSS

    MdN Design|総合情報サイト
  • 1