Как сделать, чтобы три inner div встали в строку друг за другом

Что проверяют

Понимаете ли вы, почему div по умолчанию занимает всю строку, и знаете ли современные способы раскладки. Следом обычно просят сделать блоки одинаковой ширины, а на узком экране поставить их столбиком.

Как отвечать

Начните с причины: div это блочный элемент, поэтому каждый начинается с новой строки. Раскладку меняют на родителе, а не на детях:

• flexbox: display: flex у контейнера. Направление по умолчанию row, перенос выключен (flex-wrap: nowrap), так что три блока сразу встанут в строку. Расстояние задаёт gap, одинаковую ширину даёт flex: 1 у детей;
• grid: display: grid; grid-template-columns: repeat(3, 1fr). Удобно, когда колонки должны быть строго равными и совпадать с колонками других рядов;
• inline-block у детей: работает, но между элементами появляется зазор от пробелов в разметке, а выравнивание идёт по базовой линии текста;
• float: исторический способ. Требует очистки потока, иначе родитель схлопывается по высоте. Сейчас его упоминают как знание, а не как рекомендацию.

Для адаптивности у flexbox добавьте flex-wrap: wrap и минимальную ширину элементам, у grid подойдёт repeat(auto-fit, minmax(200px, 1fr)): колонки перестроятся сами, без медиазапросов. Если блоки должны реагировать на ширину своего контейнера, а не окна, упомяните container queries.

Короткий итог, который хорошо звучит на собеседовании: для одного ряда беру flex, для сетки из рядов и колонок беру grid.

Где спотыкаются

Задают детям width: 33.33% вместе с padding или border без box-sizing: border-box. В раскладке на inline-block или float сумма выходит больше 100%, и третий блок уезжает на следующую строку.

Пишут display: flex на самих внутренних div, а не на родителе. Строка от этого не собирается, меняется только раскладка содержимого внутри каждого блока.

Не знают про min-width: auto у flex-элементов. Блок с длинным словом или широкой картинкой не сужается меньше своего содержимого и ломает ряд, лечится это min-width: 0.