Попытка заставить структуру работать с сеткой CSS

Я хочу, чтобы изображение было слева, а содержимое (заголовок над мета, мета над текстом) справа (стиль списка блогов).

Я не могу изменить структуру HTML, так что я могу сделать с сеткой CSS?

<article>

<img src="https://dummyimage.com/300x200/000/fff" alt="Golden Meadow" width="180">

<h2 >Golden Meadow</h2>

<p>by <span>Jack</span> in <span>News</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc aliquam justo et nibh venenatis aliquet. 
Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>

</article>

https://jsfiddle.net/ch9n26sz/

Как только вы создадите настоящую сетку, вы можете разместить все эти элементы в ней, где захотите.

rabowlen 22.05.2019 16:46
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
1
1
26
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно определить сетку. и скажите элементу стоять в каком столбце:

пример

article {
  display: grid;
  grid-template-columns: auto 1fr;
}

:not(img) {
  grid-column: 2;
  /* other style */
  padding:0.25rem;
  /* ... */
}
<article>
  <img src="https://dummyimage.com/300x200/000/fff" alt="Golden Meadow" width="180">
  <h2>Golden Meadow</h2>
  <p>by <span>Jack</span> in <span>News</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam justo et nibh venenatis aliquet. Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>
</article>

как напоминание или учебник https://css-tricks.com/snippets/css/complete-guide-grid/

изображение также может занимать несколько строк и быть выровнено внутри

article {
  display: grid;
  grid-template-columns: auto 1fr;
}

img {
  grid-row: span 5;/* amount of rows to span */
  margin: auto 0.5em;/* align-self can also be used read the tutorials */
}
<article>
  <img src="https://dummyimage.com/300x200/000/fff" alt="Golden Meadow" width="180">
  <h2>Golden Meadow</h2>
  <p>by <span>Jack</span> in <span>News</span></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam justo et nibh venenatis aliquet. Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam justo et nibh venenatis aliquet. Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam justo et nibh venenatis aliquet. Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>
</article>

Другие вопросы по теме