Flexbox? HTML and CSS doubt

Asked

Viewed 37 times

-4

Hi, could you help me? I can’t put one interface next to the other, I’ve tried using flex, flexbox and even inline, and yet it gets one underneath the other. I would like to place 3 next to each other (in the code I will be sending only has 2). So I’d like you to help me out with this little problem, and I’m very grateful. I saw some videos but still could not solve, always changes the shape of the product or something.

.catalogo {
    width: 1100px;
    margin: 0 auto;
    padding: 50px 0;
    
}
    
.catalogo li {
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
    display: flex;
}
<main>           
    <ul class="catalogo">
        <li>
            <h2>Trilhas Rio de Janeiro</h2>
            <img src="RJ.png">
        </li>
    </ul>
</main>
    
<main> 
    <ul class="catalogo">
        <li>
            <h2>Trilhas São Paulo</h2>
            <img src="SP.png">
        </li>
    </ul>
</main>

html css html5 css3

  • already tested put in the class you give display-flex, add flex-Direction:Row or flex-wrap:?

  • I tried now, but it continued the same thing

  • Bruno, first of all it’s important that you know HTML better. For semantic and accessibility reasons, it is not advisable to insert more than one <main> element in the document. Read: https://github.com/frontendbr/forum/issues/30. In addition, you also need to better understand how CSS works. Since it is applying a fixed width and very large in the two tags with class "catalogo". This confuses and makes it harder to understand what you really want to do. I suggest researching CSS Grid and placements using CSS. It’s an essential topic to build layouts. Good luck!

1 answer

0


You just need to add an element with display: flex containing these two elements...

.container {
  display: flex;
}

.catalogo {
  width: 300px;
}
    
.catalogo li {
  text-align: center;
  vertical-align: top;
  padding: 30px 20px;
  box-sizing: border-box;
  border: 2px solid #000000;
  border-radius: 10px;
  display: flex;
}
<div class="container">
  <div>           
    <ul class="catalogo">
      <li>
        <h2>Trilhas Rio de Janeiro</h2>
      </li>
    </ul>
  </div>

  <div> 
    <ul class="catalogo">
      <li>
        <h2>Trilhas São Paulo</h2>
      </li>
    </ul>
  </div>
</div>

Browser other questions tagged html css html5 css3

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