我正在試圖弄清楚，如何在不指定寬度的情況下將兩個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;
    }

*容器的固定寬度為200像素(可能是XX%)。#column1的寬度固定為24px，#column2的寬度設置為auto。

這將很好地工作，列2將緊挨著列1，直到列2的內容達到200-24的限制，此時，列2將跳到列1的下面，而不是在div中換行。

我試圖實現(防彈)的是，無論列2的內容有多大，列2都在容器內緊挨著列1。高度是自動的，無關緊要。

(我正在嘗試創建一個消息框，類似于臉書，縮略圖在左側，旁邊的文本沒有限制高度。我不希望第2列的文本跳到第1列的下方或環繞第1列。可能很容易，想不出來。一如既往，任何幫助都將不勝感激！:)

如果從#column2中移除float屬性并設置display:table；你會得到想要的效果。

超文本標記語言

<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>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

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

演示

嘗試刪除或添加更多& quotLorem Ipsum & quot文字。

你當然可以這樣做:

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

因為column 1將迫使column2在他的旁邊，當內容比左邊空間大得多時，column2將向下擴展。

如果你不能用其他方式包裹傷口，就試試這個:

<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/

只需設置最大寬度，使其回繞，而不是保持增長