html - 三部分动态间距 wo/Table 和绝对定位

Question

我试图将 3 个 div 放置在一个更大的 div 中，这样中间的一个 800 像素宽并且居中，另外两个填充剩余的空间。我不能使用表格，也不能使用绝对定位，因为我下面的 html 必须在三个 div 之外但在更大的 div 之内。我可以获得中心 div:

.center-div {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

但是我该如何定位另外两个 div？

<div id="outer">
    <div id="left-div"></div>
    <div id="center-div"></div>
    <div id="right-div"></div>
</div>

Answer 1

您可以尝试为容器 div 和 display: table-cell; 弄乱 display: table-row;; 用于内部 div。您甚至可能需要第二个带有 display: table; 的容器——基本思想是在不使用 table、tr 和 的情况下模拟一个表>td.

display 属性的所有这些 table- 值都是 specified in CSS 2.1 ，但我从未亲自测试过哪些浏览器支持它们。我敢打赌 IE6 无法应对。 ;-)