CSS выравнивающие поля рядом друг с другом

Question

Я пытаюсь внести некоторые изменения в WordPress (wpbakery) с немного стилей CSS. Однако я не получаю ожидаемых результатов.

Я просто пытаюсь показать некоторые поля с текстом, как показано ниже:

<div style="float: left;">Test</div>
<div style="float: left;">This is a longer test. This is a longer test. This is a longer test.</div>

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

Я воссоздал проблему с:

 <div style="margin: auto; width: 200px;">
 <div style="float: left;">Test</div>
 <div style="float: left;">This is a longer test. This is a longer test. This is a longer test.</div>
 </div>

Есть ли способ исправить это? Установка ширины не вариант для меня.

Заранее спасибо.

Answer 1

Вместо использования float: left вы можете использовать: «display: inline-block», это поместит div рядом друг с другом. Я также порекомендую вам поставить некоторые отступы с каждой стороны от div.

Вы можете увидеть свой рабочий код здесь, это самый чистый способ, который я нашел:

.nextto{
  display: inline-block;
  width: 30%;
}

<div style="width:100%">
 <div class="nextto">Test</div>
 <div class="nextto">This is a longer test. This is a longer test. This is a longer test.</div>
 </div>

Answer 2

Попробуйте использовать flexboxes

 <div style="display: flex; flex-direction: row; justify-content: space-between">
    <div>Test</div>
    <div>This is a longer test. This is a longer test. This is a longer test.</div>
 </div>

Внутри дочерних блоков вы можете установить ширину или flex-base

Answer 3

Вы должны прочитать о Flexbox . Это облегчит вашу жизнь: во flexbox это будет похоже на

.main-container: {
   display: flex;
   flex-direction: column;
 }