我想并排对齐 3 个 div。其中 2 个具有固定宽度，但最后一个必须拉伸页面的剩余区域。我的容器宽度：1000px。固定 div 的宽度为 200px。如果没有 200px 的 div，最后一个的宽度将是 1000px。如果只有一个 200px 向左浮动，则最后一个的宽度将为 800px。此外，如果只有一个 200px 向右浮动，则最后一个的宽度将再次为 800px，它将向左浮动。但是如果页面上有 2 200px div，最后一个的宽度将是 600px，它将放置在左侧 200px 和右侧 200px div 之间。我该怎么做？
我正在尝试这样做：
i45.tinypic.com/5d1nxe.jpg
【问题讨论】：
display: table;
我觉得我在这里充当 Google，但请查看以下内容：
您希望像这样设置您的假设：
div.container{
display: box;
box-orient: horizontal
}
div.container div.child {
width: 200px;
}
div.container div.child:nth-child(3) {
box-flex: 1;
}
瞧，这应该完全符合您的要求。但是，您需要使用供应商特定的前缀/属性来实现它，因为它在除 IE10 之外的所有东西中都处于实验性实现中。
【讨论】：
编辑：I've updated my example here 使用 nth-child 选择器通过预测可能出现的少数几个位置来确定应该如何处理“自动扩展”div。
如果您在没有宽度的div 的任一侧浮动固定宽度的div，则后者div 将自动展开。
让它适用于您的不同情况就像更改浮点值或重新排列您的标记一样简单。
【讨论】：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<div style="width:1000px; ">
<div id="divA" style="width: 200px; float: left; background-color: blue;">a</div>
<div id="divB" style="float: left; width:600px; background-color: yellow;">b</div>
<div id="divC" style="width: 200px; float: left; background-color: red;">c</div>
</div>
<script>
if(document.getElementById("divA") == null && document.getElementById("divC") == null) { document.getElementById("divB").style.width="1000"}
else if (document.getElementById("divA") == null || document.getElementById("divC") == null) { document.getElementById("divB").style.width="800"}
</script>
</body>
<html>
【讨论】：