没有宽度参数的两个DIV彼此相邻(宽度:自动;)

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的限制,而div2中的换行符将跳过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"文本.