Html 页脚有3列，左右固定，中心流体最大化

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

.
.
.
|[左][右]|

现在我使用的是这段代码，但中心列的宽度是固定的：(

如果您希望左手和右手div的宽度固定，请使用绝对定位和

left

和

right

属性

您可以使用相对定位的div来包装它，这样它就不会被您的站点内容重叠。

尝试这样做：

CSS:

您的HTML必须按以下顺序（左、右、中）工作：

测试
测试
测试

我写“测试”只是为了看看结果

拥抱，

---

Vin。

如果修改源订单，则可以继续使用浮动，但仅适用于左侧和右侧元素：

---

绝对定位不能很好地处理大小未知的内容。在他的情况下，如果他想在两个外部div上固定宽度，绝对定位可以。正如我之前所说的。他可以按照自己喜欢的方式来确定3个div的包装大小。这里只知道宽度，不知道高度。当内容高于视口时会发生什么情况？它被切断了，又一次。。。如果你用一个相对定位的div以你喜欢的高度来包装它，它就不会发生变化。你甚至可以滚动它们，如果你喜欢。。。您可以完全自由地修改您的选择。OP希望中心柱为流体宽度，而不是固定宽度。尝试将中心宽度100px替换为100%。它在这里起作用了。因为我使用的每个分区都有一个边框：宽度：100%；左边距：100px；右边距：100px；中央分区Thanks@willygroup等等，这有什么意义？我的解决方案有右/左边距，但你接受了这个答案，但事实并非如此？@cimmanon可能我没有看到你的答案（它比我的答案早几分钟发布）

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

.left  
{  
  float:left;  
  width: 100px;
}  
.central  
{
  width: 100%;
  margin: 0 auto;   
}  
.right  
{  
  float: right;    
  width: 100px;
}

<div class="left">test</div>    
<div class="right">test</div>
<div class="central">test</div>

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

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

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