CSSカラム：流体と幅の両方が柔軟なもの

Question

2011年には2列のレイアウトで困惑しました。私は恥ずかしいと思います。 ;）

課題は、この思い付くことです：

+--------------------------------------++----------------+ 
| This is a header with potentially || button div  | 
|          ||    | 
| long text that will wrap most likely |+----------------+ 
|          | 
| but can't go under the button to the | 
|          | 
| right        | 
+--------------------------------------+ 

ないあなたが右のdiv要素のそれと等しくなるように、左の列のマージンを設定し、一般的な2列のレイアウトと大したこと。しかし、この特定の例の変数は、いつでも右のdivがどれほど広がっているのか分かりません。（変化するテキストの行に基づいています）

要約すると、 ：

• は、両方の列が右の列は、それが左に
• 列が含まれているテキストと同じ幅である
• が残ったスペースと同じ幅である全幅に取る2列のレイアウト

私はこれを前もって構築しなければならなかったようですが、私は困惑しています。

私はCSS、JS、またはjQueryソリューションを利用できます。

EDIT：

実は、私はすでにかなり簡単jQueryのソリューションを見ることができます。私は右のdivのレンダリングされた幅をつかむことができますし、親コンテナの幅からその幅を減算し、左の列の幅を同じに設定するいくつかの計算を行います。クリーンなCSSオプションがないと、それは私の代替計画になるでしょう。

Answer 1

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

それはIE7 +およびすべての最新ブラウザで動作します。

HTML：

<div id="buttonDiv">button div as wide as text</div> 
<div id="leftDiv"> 
    left div 
</div> 

CSS：

#leftDiv { 
    overflow: hidden 
} 
#buttonDiv { 
    float: right 
} 

overflow: hidden、read this for detailsの典型的な使用ではありません。