-2

我想并排对齐 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

4

3 回答 3

0

我觉得我在这里担任 Google，但请查看以下内容：

  1. 弹性盒规范
  2. 使用 flexbox 模型的说明/教程。

你想像这样设置你的假设：

div.container{
  display: box;
  box-orient: horizontal
}
div.container div.child {
  width: 200px;
}
div.container div.child:nth-child(3) {
  box-flex: 1;
}

瞧，这应该完全符合您的要求。但是，您需要使用供应商特定的前缀/属性来实现它，因为它在除 IE10 之外的所有东西中都处于实验性实现中。

于 2013-03-12T17:28:25.733 回答
0

编辑：我在这里使用 nth-child 选择器更新了我的示例，通过预测它可能出现的少数地方来确定应该用“自动扩展”div 做什么。

如果您在没有宽度div的 a 的任一侧浮动一个固定div宽度，后者div将自动扩展。

这里的例子

让它适用于您的不同情况就像更改浮点值或重新排列您的标记一样简单。

于 2013-03-12T17:35:40.987 回答
-1 
<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>
于 2013-03-12T17:55:56.460 回答