Question

我已经在http://edge.directiongroup.co.uk/建立了这个网站，在主页上你可以看到正确的div类'.sidebar'正在以某种方式被推下来。

在另一页http://edge.directiongroup.co.uk/content-marketing/上没有问题。

这似乎是由主页上的#edge_header引起的，但我无法弄清楚我需要更改什么才能使正确的.sidebar div正确定位在两个页面上。

似乎导致问题的#edge_header的CSS在这里： -

#edge_header {
background: url("images/edge_header.png") no-repeat scroll center bottom rgb(255, 255, 255);
width: 618px;
height: 318px;
float: left;
}

堆栈溢出通常是最后通过向你们提出的问题，有人可以帮忙吗？

谢谢！

Answer 1

您需要在.sidebar之前将.edge_header放在HTML中，例如

http://linenwoods.com/images/capture.png

Answer 2

看起来它与浮动设置的方式有关 - 正在推动侧边栏的#edge_header div（我将其设置为显示：无，问题消失）。尝试将＃edge-header放入主内容div？

Answer 3

您的核心内容似乎已经有了<div>结构：

<div class="edge_header"></div>
<div class="main_content"></div>
<div class="sidebar"></div>

问题是edge_header优先于DOM中的sidebar。所以它是正确的浮动，但它在edge_header渲染后浮动。

浮动的这种对齐问题是常见的。郁闷了。每个人都有不同的CSS布局技术。对我来说，最好的解决方案是创建两个包装<div>元素＆amp;将<div>元素嵌套在那里。一个主要区域。还有一个侧边栏。我为这个例子命名了main_wrapper和sidebar_wrapper。所以你的结构会更像这样：

<div class="main_wrapper">
  <div class="edge_header"></div>
  <div class="main_content"></div>
</div>

<div class="sidebar_wrapper">
  <div class="sidebar"></div>
</div>

让那些浮动与你的其他元素类似。这样，main_wrapper中的内容就会与sidebar_wrapper中的内容隔离开来。

我更喜欢这个的原因是它保持内容在语义上流动的方式是可读的，如果/当你调试它。根据我的经验，这种包装<div>技术可以很好地解决跨浏览器/平台兼容性问题。

DIV不会对齐，会被推到内容之下

3 个答案: