2 cols、1 fixed、他の流体？（ジレンマ）

誰も私の論理を打ち負かすように見えるので、このコードを説明することはできますか？2 cols、1 fixed、他の流体？（ジレンマ）

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Test CSS Lay 2 col, 1 fix 1 fluid</title> 
<style type="text/css"> 
    body{ 
     background-color:#000; 
     padding: 0; 
     margin: 0; 
    } 
    #main{ 
     width:70%; 
     min-width:300px; 
     height:500px; 
    } 

    #colWr{ 
     width:100%; 
     height:500px; 
     float:left; 
    } 

    #col{ 
     height:inherit; 
     background-color:#900; 
     margin-left:200px; 
    } 

    #left{ 
     height:inherit; 
     background-color:#9C3; 
     float:left; 
     width: 200px; 
     margin-left: -100%; 
    } 

</style> 
</head> 
<body> 
<center> 
<div id="main"> 
    <div id="colWr"> 
     <div id="col"></div> 
    </div> 
    <div id="left"></div> 
</div> 

</center> 
</body> 
</html>

私の質問は#leftマージン左を保持している事実に依存している：-100px属性、メインのdiv内のdivの位置は、左の列ではなく、右の列であることを示唆していると、なぜです"col"列は "colWr" div内で左に浮かんでいますか？

1_fixed-1_liquid CSSレイアウトの場合、このコードはかなり心配りです。 colWrが、それはとにかく新しい行に表示されます後に浮かべ何を意味100%の幅を有するよう

出典

2012-03-18 Andrew G.H.

http://www.alistapart.com/articles/negativemargins/：私は、しかし、これを使用します。現代のブラウザでは、サイドバーを左に浮かべて固定幅にした後、コンテンツがサイドバーの幅よりわずかに大きな左端になるように、より単純なCSSで動作します。 – tvanfosson

+1私が使用する最適なソリューションです。サイドバーのみを浮動させ、コンテンツに左余白を置きます。 – rcdmk

div要素の順序は、左の列が最初に来た場合、それは新しいのにcolWr列を強制する、重要ではありません。負のマージンを与える必要があります。 left divには負のマージン100％があり、colWrの上に戻ります。

ページでは、私は見当がつかないこのようにレイアウトされた理由については、同様の効果が同じように簡単に達成colのdivに次のleftを入れてcolWr div要素を除去することにより、可能性があり（任意の害を行いませんが、それは目的を果たさない）。

また、HTML内のcenterタグは廃止されましたので、CSS margin: autoに指定することでdivを指定することをお勧めします。このコードには、ほとんどのブラウザで標準モードを起動するために必要なDOCTYPE declarationもありません。ブラウザモードの詳細については、hereを参照してください。

あなたが持っているコードは、HTML 4.01のリリース前の日付で書かれています。それは、従来のサポートのために、ほとんどのブラウザで動作しますが、それはうまく動作することを意味するわけではありません、私はそれを使用しません。個人的に、私は、DOMのコンテンツ上でのナビゲーションをしたいでしょうが、それをこのようにしないだろう -

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Test CSS Lay 2 col, 1 fix 1 fluid</title> 
     <style type="text/css"> 
      body{ 
       background-color:#000; 
       padding: 0; 
       margin: 0; 
      } 
      #main{ 
       width:70%; 
       min-width:300px; 
       height:500px; 
       margin: auto; 
      } 

      #col{ 
       height:inherit; 
       background-color:#900; 
       margin-left:200px; 
      } 

      #left{ 
       height:inherit; 
       background-color:#9C3; 
       float:left; 
       width: 200px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="main"> 
      <div id="left"></div> 
      <div id="col"></div> 
     </div> 
    </body> 
</html>

出典

2012-03-18 18:32:11

2 cols、1 fixed、他の流体？ （ジレンマ）

答えて

関連する問題

2 cols、1 fixed、他の流体？（ジレンマ）