2012-05-07 15 views
1

は、ここに私の問題の私の抽象化です:http://jsfiddle.net/BsHpj/8/同じ行に2つのdivがある場合、右側のdivの幅を指定した後、左側のdivに残りの水平スペースを埋め込むにはどうすればよいですか?

ここで働く私はanother threadで見つかっ一つだ:http://jsfiddle.net/QHTeS/2/

は、なぜ彼の作品は、私が欲しいんと私にはありませんの?すべての助けに感謝します。 http://jsfiddle.net/nLn3A/

+1

これは必要なものですか? http://jsfiddle.net/BsHpj/9/ –

答えて

2

私は、あなたが探しているのは、右の固定列と左の流体です。

方法1:左と右のスワップ順:http://jsfiddle.net/BsHpj/19/この方法ではCSSは最小限に抑えられますが、HTMLを少し直感的にする必要があります。 (Lyn(リン)ヘッドリーによる)

方法2:使用のmargin-leftとマージン右:http://jsfiddle.net/VmaZr/14/このメソッドは、素敵なHTMLを持っているが、より多くのCSSコードを必要とします。 (DynamicDrive製)

方法3:形式divをテーブルとして:http://jsfiddle.net/BsHpj/9/わかりやすく、もう少しCSS(Oswaldo Acauanによる)。

3

スワップ左右の順番:

は、ここで私のあまり抽象化されたバージョンです。それ以外の場合、最初のdivはすべての水平スペースを埋めるでしょう。

4

あなたが右のdivをフローティングにしているため、左のものをフローティングしていないため、あなたのバージョンは機能しません。したがって、左のdivは親コンテナの幅の100%を占めており、右のdivをバンプしています。左側のdivにfloat: left;を追加し、右側のdivにfloat: right;を追加した場合は、それらの間にギャップを入れて同じ行に表示する必要があります。

フロートをコンテンツのサイズに合わせて「シュリンクラッピング」すると考えてください。デフォルトでは、コンテナは通常、親の幅の100%を占めます。

+0

私はあなたが言ったようにしたと思いますが、残りのスペースを埋めるために左のdivを得ることはできません。 http://jsfiddle.net/BsHpj/15/私は間違って何をしていますか? –

関連する問題