html - 宽度自动的div，彼此相邻

Question

我对彼此相邻的 3 个 div 有疑问。左边的那个是恒定的，它的宽度不会改变。中间的需要根据右边的 div 收缩和扩展，因为它也是一个购物车，所以它也在扩展。我有你的网站，所以你可以看到问题。

这就是我要的：

[div=constant width]
[div=expanding/contracting]
[div=expanding/contracting]

细节：

• 网站：http ://ssdbutikken.dk/
• 用户：测试
• 通过：qwertytest

Answer 1

您可以为此使用 display:table 。像这样写：

HTML

<div class="parent">
  <div class="left">left</div>
  <div class="middle">middle</div>
  <div class="right">right</div>
</div>

CSS

.parent{
  width:100%;
  display:table;
}
.left,.middle,.right{
  display:table-cell;
  background:red;
}
.left{
  width:100px;
}
.middle{
  background:yellow;
}
.right{
  background:blue;
}

检查这个http://jsfiddle.net/jAquQ/

它可以工作到 IE8 及更高版本。

Answer 2

浮动：左将完成工作：试试这个

  <div style="float:left;background-color:red;width:200px">left</div>
  <div style="float:left;background-color:green">middle</div>
  <div style="float:left;background-color:blue">right</div>

Answer 3

.constant 
{
float:left;
width:200px;
margin-left:auto;
margin-right:auto;
}

.constant_2 
{
float:right;
width:700px;
margin-left:auto;
margin-right:auto;
}
<div>
<div class="constant "></div>
<div align="center"></div>

<div  class="constant_2 "></div>
</div>