2つのdivを並べて整列する

2つのdivを並べて並べるのに問題があります。私が理解しているところでは、「浮動小数点：左」を使用する必要がありますが、divは互いの上に表示されません。私はブラウザかもしれませんが、私はFF、Opera、IEで試してみましたが結果は同じです。ここ2つのdivを並べて整列する

は、その簡単にどこ行くかを確認するように、すべてのdivは異なる色です私のコード

<head> 
    <style> 
     div.container{ 
      position: relative; 
      width:800px; 
      height: 1000px; 
      background-color: red; 
      overflow: hidden; 
     } 

     div.banner{ 
      position: relative; 
      align:left; 
      width: 800px; 
      height: 100px; 
      float:left; 
      background-color: blue; 
      clear:both; 
     } 
     div.navBar{ 
      position: absolute; 
      width: 200px; 
      height: 300px; 
      float:left; 
      background-color: yellow; 
      clear: left; 
     } 

     div.content{ 
      position: absolute: 
      width: auto; 
      height: auto; 
      float:left; 
      background-color: orange; 
      clear: right; 
     } 
    </style> 
</head> 

<body> 
    <div name="banner" class="banner"> 
     This will be the banner 
    </div> 

    <div name="container" class="container"> 
     <div name="navBar" class="navBar"> 
      This will be the navbar 
     </div> 

     <div name="content" class="content"> 
      This will be the content 
     </div> 

    </div> 
</body>

です。

出典

2012-02-19 user1219387

？あなたはどちらを並べてほしいですか？ – mergesort

ここでうまく動作しますhttp://jsfiddle.net/7HDtU/本体またはブラウザのウィンドウを1000px未満の幅に制限しましたか？それは彼らが横並びではなく積み重ねて見えるようにするでしょうか？ – JaredMcAteer

あなたは 'div.content {position：absolute：...'にエラーがあります。 '：'の代わりに ';'でなければなりません –

position:absoluteは、それらを重複させるものです。

絶対位置を削除しても問題ありません。

はアクションでここを参照してください：ここで

出典

2012-02-19 15:58:13 Nirmal

http://jsfiddle.net/5ULsG/は、おそらくあなたが必要とフッタを含む完全なレイアウトです。そして、まったく混乱しないではい。 div要素は、互いの上に登場している:)

<div name="banner" class="banner"> 
This will be the banner 
</div> 

<div name="container" class="container"> 
<div name="navBar" class="navBar"> 
    This will be the navbar 
</div> 

<div name="content" class="content"> 
    This will be the content 
    </div> 
    <div name="footer" class="footer"> 
    Footer 
    </div>

 div.container{ 
     width:800px; 
     height: 1000px; 
     background-color: red; 
    } 

    div.banner{ 
     width: 800px; 
     height: 100px; 
     background-color: blue; 
    } 
    div.navBar{ 
     float:left; 
     width: 200px; 
     height: 300px; 
     background-color: yellow; 
    } 

    div.content{      
     float:left; 
     background-color: orange; 
    } 
    div.footer{      
     clear:both; 
     background-color: blueviolet; 
    }

http://jsfiddle.net/L4Zjh/1/

出典

2012-02-19 18:21:00

2つのdivを並べて整列する

答えて

関連する問題