html - 如何在主包装器 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>