将元素保持在一行中，必要时在浮动下方

Question

我有一条 div 的水平线，我想将它们放在一起，右边有一个浮动元素。当浮点数与 divs 的行重叠时，此刻它会将 divs 分成两行。我希望发生的情况是 div 行移动到浮动下方，类似于 "Heading" 这个词在没有足够的 space 时移动到浮动下方的方式。

我试过white-space: no-wrap，但这不会导致div垂直移动，它只是将它放在浮动后面。我也试过 clear: right，但是即使箱子更适合向上移动，它也会向下移动。

示例（可调整大小的框）：

h2 {
  margin: 0;
}

.outer {
  border: solid;
  resize: horizontal;
  overflow-x: auto;
  padding-bottom: 20px;
}

.right {
  float: right;
  width: 100px;
  height: 50px;
  background: red;
}

.pair {
  /* white-space: nowrap; */
}

.pair > * {
  display: inline-block;
  padding: 2px;
  margin: 0 2px;
  background: lightGreen;
}

<div class="outer">
  <div class="right"></div>
  <h2>A Heading</h2>
  <div class="pair">
    <div>This is a box</div>
    <div>This is a wide box</div>
  </div>
</div>

Answer 1

您应该将 pair 元素设置为 inline-block，因为默认情况下，块元素将被浮动元素重叠，这与将环绕浮动元素的内联级元素不同。

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.^ref

h2 {
  margin: 0;
}

.outer {
  border: solid;
  resize: horizontal;
  overflow-x: auto;
  padding-bottom: 20px;
}

.right {
  float: right;
  width: 100px;
  height: 50px;
  background: red;
}

.pair {
   /*white-space: nowrap; not needed*/
   display:inline-block;
}

.pair > * {
  display: inline-block;
  margin: 0 2px;
  padding: 2px;
  background: lightGreen;
}

<div class="outer">
  <div class="right"></div>
  <h2>A Heading</h2>
  <div class="pair">
    <div>This is a box</div>
    <div>This is a wide box</div>
  </div>
</div>

将元素保持在一行中，必要时在浮动下方

Keep element on one line, below the float if necessary

css

css-float