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

ソースの順序を変更すると、float を引き続き使用できますが、左右の要素に対してのみ使用できます。

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

Answer 3

http://jsfiddle.net/qtzKk/

左右の div に固定幅が必要な場合は、絶対配置とleftおよび属性を使用します。right

サイトのコンテンツと重ならないように、相対的に配置された div でラップできます。