css - width パラメーターなしで隣り合う 2 つの DIV ( width: auto; )

Question

幅を指定せずに2つのdivを隣り合わせに配置する方法を理解しようとしています。見た目ほど簡単ではありません。

HTML:

    <div id="container">
     <div id="column1">Fixed Width</div>
     <div id="column2">Auto Width</div>
    </div>

CSS:

    #container {
     float:left;
     width:200px;
    }
    #column1 {
     float:left;
     width:24px;
     background:gray;
    }
    #column2 {
     float:left;
     width:auto;
     background:blue;
    }

* #container は 200 ピクセルの固定幅 (XX% になる可能性があります) です。#column1 の幅は 24px に固定され、#column2 の幅は auto に設定されています。

これは問題なく動作し、column2 の内容が 200-24 の制限に達するまで、column2 は column1 の隣にあり、div 内の改行の代わりに、column2 は column1 の下にジャンプします。

column2 の内容がどれほど大きくなっても、column2 が column1 の隣のコンテナ内にとどまるように (防弾) 達成しようとしていること。高さは自動で問題ありません。

(私は Facebook に似たメッセージ ボックスを作成しようとしています。左側にサムネイルがあり、その横に無制限の高さのテキストがあります。列 2 のテキストが下にジャンプしたり、列 1 を囲んだりしたくありません)。非常に簡単かもしれませんが、理解できませんでした。いつものように、どんな助けでも大歓迎です！:)

Answer 1

floatプロパティを削除し#column2て設定display: table;すると、目的の効果が得られます。

HTML

  <div id="container">
     <div id="column1">Fix</div>
     <div id="column2">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </div>
  </div>

CSS

    #container {
     float:left;
     width:200px;
    }
    #column1 {
     float:left;
     width:24px;
     background:gray;
    }
    #column2 {
     background:blue;
    display: table;
    }

デモ

「Lorem Ipsum」テキストを削除または追加してみてください。

Answer 2

あなたは確かにこれを行うことができます：

#column2 {
    /* float:left; removed */
    width:auto;
    background:blue;
}

colum1 が column2 を横に置くように強制するため、コンテンツが左側のスペースよりもはるかに大きい場合、ccolumn2 は下に展開されます。

Answer 3

他の方法で DIV をラップしない場合は、次の方法を試してください。

<div style="width: 200px; border: 3px solid red; ">
   <div style="width:24px;     display: table-cell; border: 3px solid blue; ">
     aaa
   </div>
   <div style="display: table-cell; border: 3px solid green;">
    bbb bbb 
   </div>
</div>

http://jsfiddle.net/Zctjr/2/

Answer 4

拡大し続けるのではなく、ラップするように max-width を設定するだけです