Question

我有3个div相邻的问题。左边的那个是恒定的，它的宽度不会改变。中心需要根据右侧的div进行收缩和扩展，因为它也是一个推车，因为它也在扩展。我有可用的网站，所以你可以看到问题。

这就是我想要的：

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

详细说明：

网站：http://ssdbutikken.dk/
用户：test
通行证：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＆amp;上方。

Answer 2

.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>

Answer 3

float：left将完成工作：试试这个

  <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>

Div宽度为auto，彼此相邻

3 个答案: