如何正确围绕主包装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相比，它通常会变得更加僵硬并且易于更改。

这是一个更新的小提琴 ，可以帮助您朝这个方向开始。