Как я могу поместить свой заголовок и текст рядом с изображением?

#html #css

Вопрос:

Я пытаюсь поместить свой заголовок и текст рядом с изображением, но он этого не хочет. Кто-нибудь может мне помочь ? Спасибо

Вот окончательный результат, который я хотел бы получить : Результат

Вот мой CSS-код :

 section .articleactu {  display: ;  position: relative;  margin-left: 0px; }  .articleactu img {  max-width: 100%;  margin-left: 420px;  margin-top: 10%;  border-radius: 15px;  width: 14%; }  .articleactu p {  display: flex;  margin-left: 420px; }  .articleactu h2 {  margin-left: 420px; }  

и вот мой HTML-код :

 lt;sectiongt; lt;article class="articleactu"gt;  lt;h2gt; L'ACTUALITÉ lt;/h2gt;  lt;div class="g"gt;  lt;img src="images/gtaarticle.jpeg" alt="Article GTA déçu" class="center"gt;  lt;pgt;GTA : THE TRILOGY DEFINITIVE EDITION, les fans sont déçus ! lt;/pgt;  lt;pgt;Il y a pleins de bugs dans le jeu qui agacent les joueurslt;/pgt;  lt;pgt;Publié le 25 novembrelt;/pgt; lt;/articlegt; lt;/sectiongt;  

Ответ №1:

 body {  font-family: sans-serif;  }   section {  border-bottom: 1px solid #ccc;  padding: 24px;   }  .articleactu {  grid-column: 1 / -1;  grid-gap: 36px;  display: grid;  grid-template-columns: 200px auto;  flex-direction: column;  }   .articleactu img {  border-radius: 15px;  max-width: 200px;   } 
 lt;!DOCTYPE htmlgt; lt;htmlgt;  lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta name="viewport"  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" /gt;  lt;/headgt;  lt;bodygt;  lt;sectiongt;  lt;h2gt; L'ACTUALITÉ lt;/h2gt;  lt;article class="articleactu"gt;  lt;img src="https://i.stack.imgur.com/cTwUc.jpg" alt="Article GTA déçu" class="center"gt;  lt;divgt;  lt;pgt;GTA : THE TRILOGY DEFINITIVE EDITION, les fans sont déçus ! lt;/pgt;  lt;pgt;Il y a pleins de bugs dans le jeu qui agacent les joueurslt;/pgt;  lt;pgt;Publié le 25 novembrelt;/pgt;  lt;/divgt;   lt;/articlegt;  lt;/sectiongt;  lt;/bodygt;   lt;/htmlgt; 

Комментарии:

1. Большое вам спасибо, это сработало как волшебство !