How to leave the image on the left and the text on the side

Asked

Viewed 340 times

-1

Good Afternoon, I’m doing flexbox using the IGN Brasil site as inspiration and I want to do something like this: exemplo

Where the image is on one side and the content is next to it, I tried to use display: flex but he gets kind of messed up.

HTML code

<section class="noticias">
    <div>
    <h2>Final Fantasy 7 Rekam: Red XIII nao sera jogavel</h2>
        <p>Primeira parte da recriação do clássico de Playstation não permitira que <br>
        controlemos um heroi importante</p>            
        <img src="https://sm.ign.com/t/ign_br/news/f/final-fant/final-fantasy-7-remake-red-xiii-is-not-a-playable-character_jvpt.280.jpg" alt="">
    </div>
</section>

CSS part is empty

html css flexbox
  • 1

    Don’t get it, what is "messed up"? The Zoado for you may not be the tease for other people, explain better what you want

1 answer

1


To align the image, you need to leave the element IMG and the element DIVat the same level, after that just use the display:flex normal, I used the justify-content: flex-start to force the start.

.noticias{
    display: flex;
    justify-content: flex-start;
}
.noticias img,
.noticias div{
    padding: 10px
}
<section class="noticias">
    <img src="https://sm.ign.com/t/ign_br/news/f/final-fant/final-fantasy-7-remake-red-xiii-is-not-a-playable-character_jvpt.280.jpg" alt="">
    <div>
        <h2>Final Fantasy 7 Rekam: Red XIII nao sera jogavel</h2>
        <p>Primeira parte da recriação do clássico de Playstation não permitira que <br>controlemos um heroi importante</p>
    </div>
</section>

Reference: Flexbox

Browser other questions tagged html css flexbox

You are not signed in. Login or sign up in order to post.