无法在 IE7 中正确定位 div
我无法弄清楚如何在 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;
}
我感谢您的帮助！
I can't for the live of me figure out how to get one element in my layout to be placed properly in IE 7. You can see the page here:
http://www.iancreates.com/debbie/contact/
Works fine in Firefox, but if you look in IE 7, you'll see the sidebar is beneath the body content. I've tried everything I could think of (floating both divs, changing width and margin/padding to account for IE box model) but to no avail.
Here's the relevant 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;
}
I appreciate the help!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
这是一个典型的 IE 问题，再加上稍微不切实际的页面布局。
您已将
peace-maindiv 设置为宽度 100%，因此旁边没有空间容纳正确的内容。然而，在符合标准的浏览器中，div 没有任何高度（因为它只包含浮动元素），因此正确的内容最终位于其下方并不是问题。在 IE7 中，div 扩展以包含其内容，即左侧内容 div，因此它具有高度，并且当右侧内容位于其下方时，它最终也会位于左侧内容下方。只需从
peace-main样式中删除width: 100%;即可。This is a classic IE problem, combined with a slightly impractical page layout.
You have set your
peace-maindiv to have the width 100%, so there is no room for the right content beside it. In standards compliant browsers however, the div doesn't have any height (as it only contains floating elements), so it's not a problem that the right content ends up below it. In IE7 the div is expanded to contain it's content, i.e. the left content div, so it gets a height, and as the right content goes below it, it ends up below the left content also.Just remove
width: 100%;from thepeace-mainstyle.发布 CSS 代码会很有帮助。尝试使用“位置”。
Posting the CSS code would be helpful. Try using "position".
你可以做的一件事是将你的peace-main设置为浮动“左”并且只有700px的宽度（因此侧边栏有足够的空间）
然后侧边栏也应该将其浮动设置为“右”
但我实际上会建议您尝试以下方法之一：
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
one thing you could do is set your peace-main to float 'left' and only have a width of 700px (so there is enough room for the sidebar)
then the sidebar should also have it's float set to 'right'
but i would actually suggest you try one of these methods :
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
@Guffa 的答案在我看来是正确的。我认为您的页面也可能存在验证错误，导致其解析不正确。查看您的标记，您似乎希望
div.content-right和div.content-left位于同一个容器 div 中，但事实并非如此，正如@Guffa 指出的那样，导致了问题。替代文本 http://i432.photobucket.com/albums/qq48/shiftypowers/ 然而，如果它们位于同一个容器中，正如我认为您所希望的那样
，那么这个问题也将得到解决。尝试修复这个额外的 div 结束标记，看看它的作用：
alt text http: //i432.photobucket.com/albums/qq48/shiftypowers/validation.jpg
@Guffa's answer is correct in my estimation. I think that your page may have validation errors also that are causing it to be parsed incorrectly. Looking at your markup, it looks like you had wanted
div.content-rightanddiv.content-leftto be in the same container div, however they aren't, leading the the problem as @Guffa pointed out.alt text http://i432.photobucket.com/albums/qq48/shiftypowers/source.png
If they were in the same container however, as I think you intended, then this problem would be solved as well. Try and fix this extra div closing tag, see what that does:
alt text http://i432.photobucket.com/albums/qq48/shiftypowers/validation.jpg