帮助使 HTML/CSS 布局在 IE 中工作答案

【问题标题】：Help making the HTML/CSS layout work in IE帮助使 HTML/CSS 布局在 IE 中工作
【发布时间】：2011-01-20 22:40:37
【问题描述】：

需要一些帮助才能在 IE 中进行以下布局：

浅灰色是浏览器窗口。深灰色是主要内容区域，以窗口为中心。左边是一个固定宽度的黄色框，右边是一个可变宽度的绿色框。然后将黄色+蓝色+绿色三元组向下重复到底部（它基本上是一个简单的博客布局）。

我通过使用负边距和浮动所有三个彩色框在 Firefox/Chrome 中实现了这一点。 IE 不明白。尝试用黄色框的宽度在两侧填充深灰色区域（然后在绿色框中进行溢出：可见，空白：nowrap） - 仍然不行。

有什么想法或建议吗？ IE 到底能理解什么？

谢谢

【问题讨论】：

我们可以看看一些代码吗？
IE 是地球上最糟糕的浏览器，但正如 @Dutchie432 所说，没有完整的标记或链接，我们所说的任何内容都只是一个疯狂的猜测。
好吧，我的标记不起作用，这就是我没有发布它的原因。让我清理一下，我会把它添加到 OP 中。
顺便说一句...我真的很想用一点 Javascript 来集中整个事情。我敢肯定它不是 kosher，但它肯定是目前最快的解决方案。
不要使用javascript。对于纯粹的样式问题，回退到 JS 肯定是不合适的……

标签： html css internet-explorer layout

【解决方案1】：

Alex，这里的技巧很简单。将这两个 *fixed_size* 和 *var_size* 容器绝对定位在 #main 内。给#main相对定位。然后给两个绝对定位的容器分别负左右边距。

当然应该在 IE 中工作

祝你好运，如果您需要其他帮助，请告诉我

编辑：这是在 Fiddle 中也可见的代码：

<div id="main">
    lorem ipsum
    <div id="left">&nbsp;
    </div>
    <div id="right">&nbsp;
    </div>
</div>

和 CSS：

    #main { 
margin: 0 auto; position: relative; height: 300px; width: 400px; background: gray; 
}
    #left { 
position: absolute; width: 100px; height: 75px; left: -100px; background: red; 
}
    #right { 
position: absolute; width: 100px; height: auto; right: -100px; background: blue; 
}

显然，使用适当的方法在 IE 中将 div 居中：

    body { 
text-align: center; 
}
    #main { 
text-align: left; margin: 0 auto; 
}

EDIT2：查看更新后的 jsFiddle。希望这与您想要的一样：http://www.jsfiddle.net/2avM7/3/

【讨论】：

这很棒。谢谢你，阿米特。它确实像宣传的那样工作:)
经过仔细检查，它并没有完全符合我的要求，但它足够接近提示。这更像是它 - jsfiddle.net/2avM7/2 但它仍然不完全是，因为它仅在蓝色和红色比黄色短时才有效（使用 jsfiddle 示例）......无论如何，我使用表格重做了所有事情（是的，我知道），设置为相对位置，并添加了一段 JS，用于在页面加载时调整表格的“左侧”。花了我一个小时。一旦我无事可做，我将探索漂亮的、无 JS 的选项:)
@Alex：我没有意识到灰色区域应该是#main div。我仍然认为使用纯 CSS 方法可以完成您想要完成的工作，但是如果您使用 JS 来完成它，那我想现在就足够了.. gl :)
@Alex：我上次更正了 jsFiddle，我认为这就是你想要做的？我真的不知道了。在这里：jsfiddle.net/2avM7/3 ..希望您发现它对您有所帮助...
@Amit - 谢谢，再次接近，但不完全。 “一个” div 应该托管博客文章内容（和红色/蓝色 div - 杂项帖子信息），因此它需要是可重复的，并且在您的情况下重复它会导致红色 div 重叠。如果您使用 FF，请查看 bvckup.tumblr.com 以了解我正在采用的布局。

【解决方案2】：

你应该从一个主容器开始，它的宽度足以从左到右访问所有 3 个容器，所以像这样：

<div id="container" style="margin: 0 auto;">
 <div id="fixed_size>Content goes here</div>
 <div id="main_content" style="margin: 0 auto;">Center content</div>
 <div id="variable_size_container">Content for that goes here!<div>
</div>

margin: 0 auto; 在这里起到了作用，它将一个 div 置于其父 div 的中心。

【讨论】：

@oezi - 但是如何让 fixed_size 和 variable_size_container 粘在 main_content 的两侧？跨度>
这是 Sander 的回答，我刚刚更正了代码格式；）