我如何正確定位2 div div圍繞主包裝div

Question

我想代碼佈局我的網站在搜索引擎div的兩側顯示廣告，但由於某種原因，右div沒有對齊到頂部。任何想法爲什麼是這樣的？

我試過jsfiddle.net - http://jsfiddle.net/pbutrynowski/dThwa/1/

<div id="ads-wrapper"> 
    <div id="ads-left-pane"> 
    Left ad goes here - aligned to top of #wrapper div 
    </div> 
    <div id="wrapper"> 
    Content goes here 
    </div> 
    <div id="ads-right-pane"> 
    Right ads goes here - should be aligned to top od #wrapper div 
    </div> 
</div> 


#ads-wrapper { 
    width: 1360px; 
    margin: 0; 
} 

#ads-left-pane { 
    width: 199px; 
    background-color: #f4f4f4; 
    float: left; 
} 

#ads-right-pane { 
    width: 199px; 
    background-color: #f4f4f4; 
    float: right; 
} 

#wrapper { 
    width: 960px; 
    margin: 0 auto; 
    min-height: 200px; 
} 

這是我想擁有它 - http://awesomescreenshot.com/0812mobba0

感謝您的任何想法

Answer 1

有在爲一些簡單的錯誤，你的碼。試試這個：

<div id="ads-wrapper"> 
    <div id="ads-left-pane"> 
     Left 
    </div> 
    <div id="wrapper"> 
     Content goes here 
    </div> 
    <div id="ads-right-pane"> 
     Right 
    </div> 
    <div style="clear:both;"></div> 
</div> 

另外，我建議做一個「清」級和將其應用於一個明確的股利。這只是一小步，但從長遠來看，它可以爲您節省一些打字時間。

.clear{clear:both;} 

<div class="clear"></div> 

Answer 2

有一對夫婦的錯誤在你的代碼（你<div> ID的一個包括「＃」字符），但除了這些問題，你可能有更好的運氣讓你<div>元素都有display: inline-block'造型。與使用float相比，它通常會變得更加嚴格和易於更改。

Here is an updated fiddle可以讓你開始在那個方向。