Question

我试图找出，如何在不指定宽度的情况下将两个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的固定宽度为200px（可能为XX％）。＃column1的固定宽度为24px，＃column2的宽度设置为auto。

这将正常工作，column2将在column1旁边，直到column2的内容达到200-24的限制，而不是div内的换行符，column2将跳到column1以下。

无论column2的内容有多大，我都希望实现（防弹）column2保持在容器内的column1旁边。高度是自动的，无所谓。

（我正在尝试创建一个消息框，类似于Facebook，左侧是缩略图，旁边有无限高度的文本。我不希望column2的文本跳到下面或者包围column1）。可能很容易，无法弄明白。一如既往，任何帮助将受到高度赞赏！：）

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

DEMO

尝试删除或添加更多“Lorem Ipsum”文字。

Answer 2

您可以认真地执行此操作：

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

由于colum1会强制column2在他身边，当内容比左边空间大得多时，column2会向下扩展。

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使其换行而不是保持增长

没有宽度参数的两个DIV彼此相邻（宽度：自动;）

4 个答案: