如何在不指定宽度的情况下并排浮动两个 div，同时保持右边的 div 最小？

Question

我指的是解决方案：How do I float two divs side-by-side without specifying a width?

不过我想要相反的星座：右边的 div 应该留在右边，同时占用最少的 space（只占它的内容）和左边的 div 应该扩展到剩余的 space.

我尝试了以下方法：

.right {
  float: right;
  background: red;
}
.left {
  overflow: hidden;
  background: green;
}

<div class="left">left div</div>
<div class="right">right div</div>

然而这会将右边的 div 放在换行符上，而左边的 div 扩展到上面的整个宽度。

参见：https://jsfiddle.net/enRkR/973/

Answer 1

可能的解决方案：

.right{    
    position: absolute;
    top: 0;
    right: 0;
}

FIDDLE: https://jsfiddle.net/lmgonzalves/enRkR/974/

Answer 2

这就是您要实现的目标？

https://jsfiddle.net/ksg8fnL9/

<div id="wrapper">
    <div class="left">left div</div>
    <div class="right">right div</div>
</div>

#wrapper {
    display:table;
    width:100%;
}
#wrapper > div {
    display:table-cell;
}
#wrapper > div.right{    
    background:red;
}
#wrapper > div.left{
    background:green;
    width:70%
}

Answer 3

大功告成，只需更改两个div的顺序

而不是

<div class="left">left div</div>
<div class="right">right div</div>

你把它们放在了另一个顺序。这使得浮动 div 占用其所需的 space，下一个 div (.left) 将占用其余部分。

<div class="right">right div</div>
<div class="left">left div</div>

Answer 4

这是因为：

A float is a box that is shifted to the left or right on the current line.

取自http://www.w3.org/TR/CSS21/visuren.html#floats

因为右边浮动的 div 在新的一行上，所以它会出现在左边 div 的下面。通过将它放在左边 div 之前，它们将在同一行上。

在您的原始示例中，div 将像这样堆叠：

当右侧 div 向右浮动时，它会移动到当前行的右侧：

颠倒顺序会导致 div 像这样堆叠：

当右侧 div 向右浮动时，它会移动到当前行的右侧：

但是：

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.

所以左边div有效地向上移动到与右边div相同的行：

因此，获得所需结果的最简单方法是通过将 .right 放在 .left 之前来更改 HTML 中 div 的顺序：

.right {
  float: right;
  background: red;
}
.left {
  overflow: hidden;
  background: green;
}

<div class="right">right div</div>
<div class="left">left div</div>

如何在不指定宽度的情况下并排浮动两个 div，同时保持右边的 div 最小？

How do I float two divs side-by-side without specifying a width while keeping the right div minimal?

html

css