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 有 200px 的固定宽度（可能是 XX%）。#column1 的固定宽度为 24px，#column2 的宽度设置为 auto。

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

我想要实现的（防弹），无论 column2 的内容有多大，column2 都保持在容器内的 column1 旁边。高度是自动的，并不重要。

（我正在尝试创建一个类似于 Facebook 的消息框，缩略图在左侧，文本旁边的高度不受限制。我不希望 column2 中的文本跳到下面或环绕 column1）。可能很容易，想不通。与往常一样，我们将不胜感激任何帮助！:)

4

4 回答 4

7

如果您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”文本。

于 2013-03-30T00:47:11.210 回答
2

你当然可以这样做：

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

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

于 2013-03-30T00:48:51.420 回答
1

如果您不以其他方式包装 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/

于 2013-03-30T00:39:49.950 回答
0

只需设置 max-width 使其包裹而不是继续增长

于 2013-03-30T00:42:35.787 回答