html - 帮助使 HTML/CSS 布局在 IE 中工作

Question

需要一些帮助来使以下布局在 IE 中工作:

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

我通过使用负 margin-left 并 float 所有三个彩色框来在 Firefox/Chrome 中运行它。 IE不理解它。尝试用黄色框的宽度在两侧填充深灰色区域(然后在绿色框中执行 overflow: visible, white-space: nowrap)- 仍然不行。

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

谢谢

Answer 1

亚历克斯，这里的技巧很简单。将这两个 *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/