css - CSS：3列のレイアウト、左の動的全幅、中央と右の自動コンテンツ幅

Question

私は次のことをする必要があります：

   max-width to center     content auto width    content auto width
<-----------------------><--------------------><-------------------->
          left                  middle                right

したがって、中央/中央の列と右の列にはコンテンツが含まれ、幅が自動的に拡大します。しかし、左のものは、真ん中のものにスナップするまで、できるだけ広くする必要があります。

私が今持っているのは、「float：right」の真ん中と右です。そして、「float：left」で1つ残しました。

しかし、これにより、colの幅が制限されたままになります。

どうすればできるだけ広くすることができますか？

Answer 1

私の知る限り、これはを使用してのみ実行できますdisplay: table。私が正しく理解していれば、これはあなたが望むものです。divをテーブルセルとして機能させ、左側のdivを100％の幅に設定して、空きスペースを自動的に埋めます。

Answer 2

それらをすべて左に浮かせます。そうすれば、それらはすべて、最大幅で左側の列に「傾く」ようになります。

また、いくつかの幅の考慮事項または明確な条件が必要になります。

これはあなたのために多くをクリアします

Answer 3

これを試して：

http://jsfiddle.net/vcw7Q/

50〜24〜24パーセントを使用して実行...

HTML

<div id="divLeft">
    div left to center
</div>    
<div id="divRight1">
    div right 1
</div>    
<div id="divRight2">
    div right 2
</div>    

CSS

#divLeft{
    width: 50%;
    display: inline-block;
    background-color: forestGreen;
}
#divRight1{
    width: 24%;
    display: inline-block;
    background-color: blue;
}
#divRight2{
    width: 24%;
    display: inline-block;
    background-color: red;
}