對齊2 div並排

我有一個問題得到2 div並排對齊。根據我的理解，使用「float：left」應該可以做到，但它不會 - div會出現在彼此之上。我雖然可能是瀏覽器，但我嘗試了FF，Opera和IE，結果是一樣的。對齊2 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>

所有div是不同的顏色，所以它更容易地看到究竟會去哪裏。

來源

2012-02-19 user1219387

其中的div都出現在彼此的頂部？你想要哪一個並排？ – mergesort 2012-02-19 15:54:37

在此處可以正常工作http://jsfiddle.net/7HDtU/您是否將身體或瀏覽器窗口限制爲小於1000像素的寬度？那會導致他們看起來堆疊而不是並排？ – JaredMcAteer 2012-02-19 15:55:04

'div.content {position：absolute：...'''有錯誤。它應該是';'而不是'：' – 2012-02-19 15:59:41

position:absolute是使它們重疊的原因。

刪除絕對定位，它應該工作正常。

在這裏看到的動作：http://jsfiddle.net/5ULsG/

來源

2012-02-19 15:58:13 Nirmal

這是一個完整的佈局，包括註腳其中大部分可能是你所需要的。是的，絕對沒有混亂。 :)

<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

回答

相關問題