Как сделать так, чтобы не переносилась строка в HTML?

Question

Нужно задать картинке "Brusher_logo" расположение на одной строке с "goroda_logo", а надписи "Города" одинаковую строку с "Brusher". Прилагаю код.

<div style="text-align:left;"> <img src="Goroda logo.png" alt="goroda_logo" width="200px"> </div>
<p style=" font-family:russo one;font-size: 30px;"><b>Города</b></p>
<div style="text-align:center;"> <img src="brusher_logo.png" alt="brusher_logo" width="200px"> </div>
<p style=" text-align: center; font-family:russo one;font-size: 30px;"><b>Brusher</b></p>

Answer 1

<div style="display: flex; white-space: nowrap; justify-content: flex-start;">
  <div style="display: flex; text-align:left;"> <img src="Goroda logo.png" alt="goroda_logo" width="200px"> </div>
  <div style="display: flex; text-align: center;"> <img src="brusher_logo.png" alt="brusher_logo" width="200px"> </div>
</div>

<div style="display: flex; white-space: nowrap;">
  <p style=" text-align: center; font-family:russo one;font-size: 30px; margin-left: 10px;"><b>Brusher</b></p>
  <p style=" font-family:russo one; font-size: 30px; margin-left: 10px;"><b>Города</b></p>
</div>

вроде так, но не точно

Answer 2

Для выравнивания элементов используется стиль display:flex.
Для табличного построения зачастую используется display:grid, но и flex тоже подойдёт.
Я специально сделал две типа картинки разной высоты, что бы вы убедились в том, что текст стоит на одном уровне вне зависимости от высоты предыдущего элемента. Это достигается при помощи параметра display:flex; flex-direction:column; justify-content: space-between. Не буду расписывать здесь уроки по CSS, просто почитайте сами, если интересно.
P.S. Не пишите css в html. Всегда разделяйте их.

img {
  display: block;
  width: 100%;
  height: 100px;
  background: green;
  border: 1px solid black;
}
.flex:last-child img {
  height: 150px;
}

p {
  font-size: 30px;
  margin: 0;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<div class="grid">
  <div class="flex">
    <img src="Goroda logo.png" alt="goroda_logo" width="200px">
    <p><b>Города</b></p>
  </div>
  <div class="flex">
    <img src="brusher_logo.png" alt="brusher_logo" width="200px">
    <p><b>Brusher</b></p>
  </div>
</div>

БЛОГ НА HUSL

Как сделать так, чтобы не переносилась строка в HTML?

Ответы (2 шт):