При необходимости удерживайте элемент на одной строке под поплавком.

Question

У меня есть горизонтальная линия div с, которую я хотел бы сохранить вместе, и справа есть плавающий элемент.Когда float перекрывает линию div, в данный момент он разбивает div на две строки.Я хотел бы, чтобы линия div перемещалась ниже поплавка, подобно тому, как слово «Заголовок» перемещается ниже поплавка, когда не хватает места.

Я пытался 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

Вы должны сделать элемент пары равным inline-block, потому что по умолчанию элемент блока будет перекрываться плавающим элементом в отличие от встроенного элемента уровня, который будет обтекать плавающий элемент.

Свойство float CSS размещает элемент с левой или правой стороны его контейнера, позволяя обтекать вокруг него текстовые и встроенные элементы . ^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>