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

Posted 2023-02-25

【中文标题】如何在不指定宽度的情况下使两个 DIV 相邻浮动？

【英文标题】：How to float two DIVs next to each other without specifying width?

【发布时间】：2014-05-30 22:12:10

【问题描述】：

我试图将两个 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 会按预期向左浮动。

我怎样才能让它工作？

【问题讨论】：

把左边的div放在右边的div里面，把它的高度设置为100%，然后把右边的设置为100%宽度有问题吗

【参考方案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 规则。

【讨论】：

所以DIV上的overflow:hidden实际上不会导致它的任何内容被隐藏？

@Nate 不，只要您不提供任何特定的高度或宽度。它将一直站在浮动元素旁边，如果它超过浮动元素的底部，它将不会包裹在它下面。

@Nate 实际上，如果浮动元素有背景，您甚至可以跳过溢出：隐藏：查看内容过于狂野的区别jsfiddle.net/Zf3bd/6，jsfiddle.net/Zf3bd/7。这种词是不存在的，但是如果是图片的话，可以设置一个max-width，如果有的话会遵循溢出规则。没有最大宽度：jsfiddle.net/Zf3bd/8，jsfiddle.net/Zf3bd/9 和最大宽度：jsfiddle.net/Zf3bd/10

【参考方案2】：

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

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


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


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