Question

所以我有一行有5个单元格。内部3的宽度是静态的。第一个和最后一个（最左边和最右边）应该展开以填充页面，以便内部3居中。外部单元是必需的，因为它们包含重复的背景图像。使用表格很容易，因为不向外部单元格提供宽度允许它们扩展并构成额外的空间：

<table width="100%">
    <tr height="400">
        <td></td>
        <td width="200"></td>
        <td width="300"></td>
        <td width="200"></td>
        <td></td>
    </tr>
</table>

但是除了使用display：table之外，我似乎无法使用DIV和CSS获得相同的效果。属性。我希望找到另一种解决方法，因为IE6和IE7不支持此属性。

<div id="container">
    <div id="stretchLeft"></div>
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
    <div id="stretchRight"></div>
</div>

Answer 1

你可以在加载和调整大小时使用javascript / jQuery。获取整页宽度。然后（整页宽度 - 左宽度 - 中心宽度 - 右宽度）/ 2 这将是你的伸展的宽度。

Answer 2

如果#stretchLeft和#stretchRight的唯一目的是将剩余的三个div作为中心，那么就将它们排除在外。

body{
   text-align:center;
}
#container{
    width:700px;
    margin:auto;
}


<body>
    <div id="container">
        <div id="stretchLeft"></div>
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
        <div id="stretchRight"></div>
    </div>
</body>

会做你想做的事。

如果他们有内容，那么这些内容将起作用，但需要调整以适应您自己的个人情况： http://jsfiddle.net/YFx2m/

另外，FWIW，除非你有商业理由支持它们，否则IE6的市场份额不到1％，而IE7则低于5％。

使用DIV替换表格 - 填充页面宽度而不知道左侧或右侧单元格的宽度

2 个答案: