html - 如何在不指定宽度的情况下并排 float 两个 div，同时保持右侧 div 最小？

Question

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

不过，我想要相反的星座:右边的 div 应该留在右边，同时占用最少的空间(只占用它的内容)和左边的 div 应该扩展到剩余空间。

我尝试了以下方法:

.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

这是因为:

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

因为右边 float 的 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 相同的行:

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

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

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