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

Question

我会获得与左固定的宽度和右列和中央填充剩余的空间中的3列脚注：

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

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

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

Answer 1

如果您修改源订单，您可以继续使用花车但只适用于左，右元素：

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个兄弟元素表的显示类型β细胞会做的工作（作为一个额外的好处，元素现在的高度相等）：

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

Answer 2

http://jsfiddle.net/qtzKk/

使用绝对定位和left和right属性，如果你想为一个固定宽度的左手和右手divs

你可以用一个相对定位的div来包装它，所以它不会与你的网站内容重叠。

Answer 3

尝试这样做：

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> 

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

拥抱， Vin。