4

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 ソリューションに対してオープンです。

編集：

実際、私はすでにかなり簡単な jQuery ソリューションを目にすることができます。右側の div のレンダリングされた幅を取得し、その幅を親コンテナーの幅から差し引いて、左側の列の幅を同じに設定する計算を行うことができます。きれいな CSS オプションがない場合、それが私の代替案になります。

4

1 に答える 1

9

参照: 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、こちらをお読みください。

于 2011-07-20T00:10:18.500 に答える