Предотвращение неправильного переноса плавающих элементов

Question

Эти внутренние элементы имеют одинаковую ширину, но высота является переменной. Внешний div является жидким, поэтому мы никогда не знаем, сколько из них поместится в каждом ряду. Я хочу предотвратить нежелательные переносы строк, как показано в этом великолепно художественном примере:

Есть ли способ сделать это в CSS без Javascript? Вот что у меня сейчас:

.outer_div {
    overflow: hidden;
    text-align: left;
}
.inner_div {
    float: left;
    width: 200px;
}

Answer 1

Я разобрался, спасибо всем за помощь! Единственным необходимым изменением было использование inline-block вместо float и vertical-align: top на внутренних элементах div следующим образом:

.inner_div {
    display: inline-block;
    vertical-align: top;
    width: 200px;
}

Answer 2

Если вы используете CSS flexbox в родительском контейнере и позволяете обернуть его содержимое, т.е. устанавливаете flex-wrap: wrap, вы сможете получить желаемый макет.

Вот подтверждение концепцииНапример, с помощью ES6 просто генерировать случайные высоты для отдельных ящиков в демонстрационных целях.

const elements = Array.from(document.querySelectorAll('.inner_div'));

elements.forEach(element => {
  element.style.height = `${Math.round(Math.random() * 100) + 50}px`;
});

.outer_div {
  display: flex;
  flex-wrap: wrap;
}

.inner_div {
  width: 200px;
  margin: 5px;
  height: 50px;
  background-color: steelblue;
}

<div class="outer_div">
  <div class="inner_div"></div>
  <div class="inner_div"></div>
  <div class="inner_div"></div>
  <div class="inner_div"></div>
  <div class="inner_div"></div>
  <div class="inner_div"></div>
  <div class="inner_div"></div>
  <div class="inner_div"></div>
  <div class="inner_div"></div>
  <div class="inner_div"></div>
</div>