#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. Большое вам спасибо, это сработало как волшебство !