如何正確圍繞主包裝div定位2 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>

另外，我建議創建一個“清除”類並將其應用於清除div。 這是一個很小的步驟，但是從長遠來看，它可以節省一些鍵入時間。

.clear{clear:both;}

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

Answer 2

您的代碼中有幾個錯誤（您的<div> ID中的一個包含了'＃'字符），但是除了這些問題之外，您可能更幸運地使您的<div>元素能夠display: inline-block'樣式。 與使用float相比，它通常會變得更加僵硬並且易於更改。

這是一個更新的小提琴 ，可以幫助您朝這個方向開始。