Плавающий абзац с неопределенной шириной

Question

У меня есть div, содержащий четыре элемента с метками 1, 2, 3 и 4, как показано на диаграмме ниже, где # 4 - единственный элемент с неопределенной высотой и шириной. Я бы хотел, чтобы # 2 плавал справа от # 1, а № 4 - справа от # 3, но # 4 просто находится ниже # 3, а не справа от него. Я создал диаграмму, чтобы проиллюстрировать мое намерение.

#container {
  width: 300px;
  height: 200px;
  padding:20px;
  background-color: #ff6666;
}

#a {
  margin:10px;
  width: 80px;
  height: 80px;
  float: left;
  background-color: #14165b;
}

#b {
  margin:10px;
  width: 80px;
  height: 80px;
  float: right;
  background-color: #14165b;
}

#c {
  margin:10px;
  width: 80px;
  height: 80px;
  float: left;
  clear:left;
  background-color: #14165b;
}

#d {
  margin:10px;
  padding:10px;
  float: right;
  background-color: #9536ff;
  font-size: 12px;
  color: white;
}

<div id="container">
  <div id="a"></div>
  <div id="b"></div>
  <div id="c"></div>
  <p id="d">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Диаграмма

Answer 1

В приведенном ниже решении я обернул строки с <div class="row"> и использовал display: flex; flex-wrap: wrap; для родителя #container. .row также гибкий и имеет justify-content: space-between, чтобы обеспечить максимально возможное расстояние между его детьми. Я также изменил #a, #b и #c параметр width на min-width, поэтому flexbox будет это учитывать.

Если вы новичок в flexbox, я рекомендую это руководство .

#container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  height: 200px;
  padding: 20px;
  background-color: #ff6666;
}

.row {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

#a {
  margin: 10px;
  width: 80px;
  height: 80px;
  float: left;
  background-color: #14165b;
}

#b {
  margin: 10px;
  width: 80px;
  height: 80px;
  float: right;
  background-color: #14165b;
}

#c {
  margin: 10px;
  min-width: 80px;
  height: 80px;
  float: left;
  clear: left;
  background-color: #14165b;
}

#d {
  margin: 10px;
  padding: 10px;
  float: right;
  background-color: #9536ff;
  font-size: 12px;
  color: white;
}

<div id="container">
  <div class="row">
    <div id="a"></div>
    <div id="b"></div>
  </div>
  <div class="row">
    <div id="c"></div>
    <p id="d">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>