16

以下marginfixに、ブロック レベル要素であり、ブロック レベルoneでtwoもあるものを示しましたが、これらはフローティングされています。これが、それらがレイアウトの同じ行にあるがどちらもフローティングされていない理由でmarginfixあり、ブロックレベルの要素は次のように要素の下に配置する必要があります

+--------------------+                                 +--------------------+
|                    |                                 |                    |
+--------------------+                                 +--------------------+
                        +--------------------------+
                        |                          |
                        +--------------------------+

しかし、それはこのように機能します

+--------------------+ +--------------------------+  +--------------------+
|                    | |                          |  |                    |
+--------------------+ +--------------------------+  +--------------------+

これはHTMLです

<div class="wrap">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="marginfix">three</div>
</div>

CSS

.wrap{
  width: 500px;
  background-color: red; 
  position: relative;
  margin: 0 auto;
}
.one{
  width: 200px;
  float: left;
}
.two{
  width: 200px;
  float: right;
}
.marginfix{
  margin: 0 210px;
}

アップデートノート

marginfixフローティング要素の残りのスペースが含まれていると言う人もいるかもしれません。もしそうなら、html 要素の順序を変更すると機能しないのはなぜですか。この html は上記の html のようには機能しません

<div class="wrap">
<div class="one">one</div>
<div class="marginfix">three</div>
<div class="two">two</div>
</div>

では、マージン値はどのように機能するのでしょうか?

4

9 に答える 9

10

これがフロートの仕組みです。フロートは通常のコンテンツの流れから取り除かれます。.marginfix他の人よりも下に座りたい場合は.marginfix{clear: both;}、スタイルに追加してください。

于 2013-04-30T01:52:57.343 に答える
3

マージンと浮動要素の相互作用

HTML と CSS のデモ: http://jsfiddle.net/audetwebdesign/2Hn7D/

この例で.wrapは、 が親で、固定幅 600px のブロック要素を含み、標準的な方法で水平方向に中央揃えされていmargin: 0 autoます。

親ブロック内には、ブロック レベルの要素がありdiv.marginfix、いくつかのテキスト (説明用) があります。そのためdiv.marginfix、通常の流れであり、ブロック フォーマット コンテキストにあります。その幅は、親コンテナーの幅いっぱいに拡張されます。

親ブロックには、2 つのフロート要素 と が含まれてdiv.oneおりdiv.two、それぞれ左と右にフロートし、両方ともwidth: 200px.

CSS 準拠のブラウザは、CSS ブロック フォーマット モデルに従って、次の方法でコンテンツをレイアウトします。

(1) フロートされた要素を無視し、残りのインフロー要素 ( .marginfix) のレイアウトを計算して、マージン、パディング、行の高さ、インライン要素などを調整します。

(2) フロートを配置するために必要なスペースを決定して、左のフロート要素が親の左端と同一平面上にあり、右のフロート要素が親の右端と同一平面上にあり、両方の上端が親に隣接するようにします。親要素の上端。

(3) 必要に応じて行ボックス (子のテキストを囲む架空のボックス) の幅を調整してdiv、通常のフロー要素のテキストが浮動要素を包み込むようにします。

基本的な例

最も単純なケースでは、.marginfixテキストがフロートをクリアすると、テキストは 2 つのフロート要素を囲み、親要素の左端と右端まで拡張されます。

例 2 - 余白を追加する

に左右のマージンを追加すると.marginfix、インフロー div の幅は {親の幅 - 左マージン - 右マージン} と計算されるため、テキストはレイアウトの中央に制限されます。パディングを使用すると、同様の効果が得られます。

この例のテキスト形式は、浮動兄弟の一方または両方が削除された場合でも同じであることに注意することが重要です。

例 3 - 要素の順序の変更

フロートを使用する場合、要素の順序によって違いが生じます。

次のバリエーションを検討してください。2 つの floatの.marginfix間に配置します。div

<div class="wrap ex3">
    <div class="one mark">one - add some text to make it taller for effect.</div>
    <div class="marginfix">three - Nulla vehicula libero... </div>
    <div class="two mark">two - single liner</div>
</div>

この場合、からのテキスト.marginfixは左の浮動要素を囲みます。

ただし、右のフロート要素がインフロー ブロックの後に表示されるようになったため、.two要素は右にフラッシュされ (予想どおり)、最も近いブロック レベル要素 (この場合は ) の下端にフラッシュされます.marginfix。

に適用されるマージンまたはパディング.marginfixは、単に流入要素の高さを拡張し、div.twoその後に配置されます (例 4を参照)。

例 5 - 新しいブロック フォーマット コンテキストの確立

に適用overflow: hiddenする.marginfixと、CSS フォーマッティング モデルは新しいブロック フォーマッティング コンテキストを開始します。つまり、.marginfix隣接するフローティング要素の端を超えて拡張することはありません。

この例では、 からのテキストは.marginfix、左側のフローティング要素に回り込まなくなりました。

前と同じように、まだブロック レベルの要素であるため 、右側のフロートdivはまだ後に配置されます。.marginfix.marginfix

于 2013-05-14T17:51:42.650 に答える
0 
 This is HTML:
 =================

 <div id="container">
    <div id="one"><h1>hello world1</h1></div>
    <div id="two"><h1>hello world2</h1></div>
    <div id="three"><h1>hello world3</h1></div>
 </div>

 CSS
 ====
  #container
    {
        height: 1024px;
        width: 760px;
        position: fixed;
    }

    #one
    {
        margin-left: 10px;
        position: relative;
        border: 2px solid red;
        width: 220px;
    }
    #two
    {
        margin-left: 272px;
        position: absolute;
        border: 2px solid Blue;
        width: 220px;
        float: right;
    }
    #three
    {
        border: 2px solid Green;
        float: right;
        margin-top: -86px;
        position: relative;
        width: 220px;
    }
于 2013-05-15T17:55:34.980 に答える