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

Question

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

.
.
.
|[左]<------中央------>[右]|

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

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

Answer 1

尝试这样做：

CSS：

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

并且您的 HTML 必须按以下顺序（左、右和居中）才能工作：

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

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

拥抱，文。

Answer 2

http://jsfiddle.net/qtzKk/

如果您想要左右手 div 的固定宽度，请使用绝对定位和leftand属性。right

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

Answer 3

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

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