css - 两个相邻的 DIV 没有宽度参数(宽度 : auto; )

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 的宽度设置为自动。

这会很好地工作，column2 将紧挨着 column1，直到 column2 的内容达到 200-24 的限制，此时 column2 将跳到 column1 下方，而不是 div 内的换行符。

无论 column2 的内容有多大，我正在努力实现(防弹)column2 在容器内紧挨着 column1。高度是自动的，无关紧要。

(我正在尝试创建一个类似于 Facebook 的消息框，左侧是缩略图，旁边是无限高度的文本。我不希望 column2 中的文本跳到下方或环绕 column1)。可能很容易，想不通。一如既往，我们将不胜感激任何帮助! :)

Answer 1

如果您从 #column2 中删除 float 属性并设置 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”文本。