Question

我不能为我的生活找出如何让我的布局中的一个元素在IE 7中正确放置。你可以在这里看到这个页面：

http://www.iancreates.com/debbie/contact/

在Firefox中运行良好，但如果你在IE 7中查看，你会看到侧边栏位于正文内容之下。我已经尝试了我能想到的一切（浮动两个div，更改宽度和边距/填充以考虑IE框模型）但无济于事。

这是相关的CSS：

.content-left {
width:670px;
height:auto;
margin:0 30px 0 10px;
padding:0;
float:left;
}


.content-right {
width:240px;
height:auto;
margin:0;
padding:0;
float:left;
}

我很感激帮助！

Answer 1

这是一个经典的IE问题，加上略显不切实际的页面布局。

您已将peace-main div设置为宽度为100％，因此旁边没有合适内容的空间。然而，在符合标准的浏览器中，div没有任何高度（因为它只包含浮动元素），因此正确的内容最终会低于它而不是问题。在IE7中，div被扩展为包含它的内容，即左侧内容div，因此它获得了一个高度，当正确的内容低于它时，它也会在左侧内容之下结束。

只需从width: 100%;样式中删除peace-main。

Answer 2

发布CSS代码会很有帮助。尝试使用“位置”。

Answer 3

你可以做的一件事是将你的和平主体设置为漂浮'左'并且只有700px的宽度（所以侧边栏有足够的空间）

然后侧边栏也应该将它的浮动设置为'右'

但我实际上建议您尝试以下方法之一： http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Answer 4

@ Guffa的回答在我的估计中是正确的。我认为您的页面可能还有验证错误，导致它被错误地解析。查看您的标记，看起来您希望div.content-right和div.content-left位于同一个容器div中，但它们不是，导致问题正如@Guffa所指出的那样。

alt text http://i432.photobucket.com/albums/qq48/shiftypowers/source.png

如果他们在同一个容器中，正如我想你想的那样，那么这个问题也会得到解决。尝试并修复这个额外的div结束标记，看看它做了什么：

alt text http://i432.photobucket.com/albums/qq48/shiftypowers/validation.jpg

在IE7中无法正确定位div

4 个答案: