Question

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

。
。
。
| [LEFT]＆LT; ------ ------中央＆GT; [RIGHT] |

现在我正在使用此代码，但中心列具有固定宽度:(

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

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

拥抱， VIN。

Answer 2

http://jsfiddle.net/qtzKk/

如果您想要左手和右手div的固定宽度，请使用绝对定位以及left和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;  
}

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

3 个答案: