如何在不指定宽度的情况下将两个DIV彼此相邻浮动？

Question

我正试图向左浮动两个DIV，最左边的DIV有一个设定的宽度，最右边的DIV占据了剩余的空间。我认为这会奏效，但事实并非如此：

<div class="container">
    <div class="left">
        content left
    </div>
    <div class="right">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>

</div>

.container {
    overflow: auto;
    width: 600px;
    background-color: lightgreen;
}

.left {
    width: 50px;
    float: left;
    background-color: lightblue;
}

.right {
   float: left; 
   background-color: lightpink;
}

JSFIDDLE

我在这里阅读了一些相关的问题，其中许多建议将overflow: hidden添加到父容器中，但我尝试过的任何东西都没有用过！

如果我删除大部分lorem ipsum文本到只有几个单词的位置（即宽度小于容器），那么最右边的DIV会按预期浮动到左边。

我怎样才能使这个工作？

Answer 1

如果您希望它覆盖所有可用的水平宽度，则流中的第二个元素不应浮动。

要让它站在一边而不是落后，你需要触发布局。例如，您可以使用overflow:hidden。的 DEMO

.container {
    overflow: auto;
    width: 600px;
    background-color: lightgreen;
}

.left {
    width: 50px;
    float: left;
    background-color: lightblue;
    height: 400px;
}

.right {
   overflow:hidden;/* trigger layout to mind floatting elements inside and outside*/
   background-color: lightpink;
}

对于相同高度的列，您可以在父级上使用display:table，在子级上使用display:table-cell，在这种情况下删除所有float规则。

Answer 2

你可以尝试这个，但不要浮动：

.container {
  overflow: auto;
  width: 600px;
  background-color: lightgreen;
}

.left {
  width: 50px;
  position:absolute;
  background-color: lightblue;
}

.right {
  margin-left:50px;
  background-color: lightpink;
}