3列、中央の列固定、両側の親を埋める

Question

AとCがスペースを埋める間に、Bを固定の800pxサイズにするにはどうすればよいのですか？ http://jsfiddle.net/8ufuV/

Answer 1

最も簡単な方法は、display: table-cellを使用することです。

を参照してください：http://jsfiddle.net/47d4f/

あなたの問題を解決し、また、コンテンツは、各列に異なる場合、あなたにequal height columnsを与える - それ以外の場合は取得するシンプルではない何か。

ブラウザのサポート：http://caniuse.com/css-table

Answer 2

http://jsfiddle.net/8ufuV/17/ すべての要素を左に浮動させる必要があります。次に幅を指定します（そうするときにパディング/マージンを忘れないでください）。下に表示したい要素にclear:left;を追加します。

幸運

Answer 3

HTML：

<div id="main"> 

<div id="leftblock">a</div> 

<div id="contentblock">b</div> 

<div id="rightblock">c</div> 

</div> 

CSS：

#main { 
    display:table; 
    width:100% 
} 

div { 
    display: table-cell 
} 

#leftblock{ 
    top: 0px; 
    left: 0px; 
    margin: 0px; 
    padding: 10px; 
    border: 5px solid #ccc; 
    voice-family: "\"}\""; 
    voice-family:inherit; 
} 

#contentblock{ 
    padding: 10px; 
    border: 5px solid #ccc; 
    width: 100px; 
} 


#rightblock{ 
    top: 0px; 
    right: 0px; 
    margin: 0px; 
    padding: 10px; 
    border: 5px solid #ccc; 
    voice-family: "\"}\""; 
    voice-family:inherit; 
}