Как сделать блок таким без использования лишних

Question

Пока что я додумался сделать это дивами. Возможно ли сделать это проще и без лишних дивов

 <article style="display: flex;">
        <div>
            <h2>заголовок</h2>
            <h4>текст</h4>
        </div>
        <img src="" alt="картинка">
 </article>

Answer 1

Прочитайте о display: grid.

/* Стили в этом css только для того чтобы лучше показать результат */

* {
  margin: 0;
  padding: 0;
}

article {
  width: 300px;
  height: 150px;
}

article * {
  outline: 1px solid black;
  outline-offset: -2px;
}

<!-- Основная конструкция описана в html -->
<article style="display: grid; grid: 'title image' auto 'text image' 1fr / 1fr 1fr;">
  <h2 style="grid-area: title">заголовок</h2>
  <h4 style="grid-area: text">текст</h4>
  <img src="" alt="картинка" style="grid-area: image">
</article>

БЛОГ НА HUSL

Как сделать блок таким без использования лишних

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