css - コンテナ固定幅。センター div の動的幅。左右の div で残りの幅を均等に埋めたい

Question

3 つの列があります。3 つすべての結合幅は固定です。2 番目 (中央) の列には動的なコンテンツがあります。残りのスペース (コンテナーの幅 - 中央の列の動的な幅) を均等に埋めるには、左右の列が必要です。

例: http://jsfiddle.net/htKje/

<div class="container">
   <div class="bg"></div>
   <div>Lorem Ipsum</div>
   <div class="bg"></div>
</div>

CSS :
.container { width:500px; }
.bg {backgrould:#CCC; }

Answer 1

背景を設定するためだけに左右の列が必要な場合は、ほとんどの場合、まったく必要ありません。

に を設定しbackground、.container同じコンテナtext-align: centerを指定し、中央の列を作成してとinline-blockをリセットするだけでうまくいきます。backgroundtext-align

デモ

HTML :

<div class='container'>
    <div class='c'>booooo add remove text here</div>
</div>

CSS :

.container {
    background: #ccc;
    text-align: center;
}
.c {
    display: inline-block;
    background: white;
    text-align: left;
}