html - 具有3列的页脚，左右固定，中心流体最大化

我将获得一个3列的页脚，其左右列的宽度固定，中间填充剩余空间：

。
。
。
| [左] [右] |

现在我正在使用此代码，但是中央列的宽度是固定的:(

.left
{
  float:left;
  width: 100px;
}
.central
{
  float:left;
  width: {xxx}px
}
.right
{
  float:right;
  width: 100px;
}

最佳答案

如果您修改源顺序，则可以继续使用浮点数，但只能用于左元素和右元素：

http://tinker.io/99f07/2

.left
{
  float:left;
  width: 100px;
}
.central
{
    margin-left: 100px;
    margin-right: 100px;
}
.right
{
  float:right;
  width: 100px;
}

<div class="left">
    Left
</div>

<div class="right">
    Right
</div>

<div class="central">
    Lorem ipsum dolor...
</div>

否则，将所有3个同级元素的显示类型更改为table-cell即可完成这项工作（作为一项额外的好处，这些元素现在的高度相等）：

http://tinker.io/99f07/1

/* optional
body {
    display: table;
    width: 100%;
}*/

.left
{
  display: table-cell;
  width: 100px;
}
.central
{
  display: table-cell;
}
.right
{
  display: table-cell;
  width: 100px;
}

关于html - 具有3列的页脚，左右固定，中心流体最大化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16300772/