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之一包含了＃39;＃＆＃39;字符）但除了这些问题之外，您可能会有更好的错误祝你的<div>元素具有display: inline-block'样式。与使用float相比，它通常会变得更加严格并且更容易进行更改。

Here is an updated fiddle可以让你开始朝这个方向发展。

如何在主包装div周围正确定位2个div

2 个答案: