-4

Olá, poderiam me ajudar? Não consigo colocar uma interface do lado da outra, já tentei usar o flex, flexbox e até o inline, e mesmo assim ela fica com uma embaixo da outra. Gostaria de colocar 3 uma ao lado da outra(no codigo que estarei enviando só tem 2). Logo, gostaria que me ajudassem nesse probleminha, ficarei muito grato. Vi alguns vídeos mas mesmo assim nao consegui resolver, sempre altera a forma do produto ou algo do tipo.

.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>

3
  • já testou colocar na classe que você dá display-flex, adicionar flex-direction:row ou flex-wrap: wrap? Commented 27/10/2020 às 17:24
  • tentei agora, mas continuou a mesma coisa Commented 27/10/2020 às 17:36
  • Bruno, primeiramente é importante que você conheça melhor o HTML. Por questões semânticas e também de acessibilidade, não é aconselhável inserir mais de um elemento <main> no documento. Leia: github.com/frontendbr/forum/issues/30. Além disso, tb falta vc entender melhor o funcionamento do CSS. Visto que está aplicando um width fixo e bem grande nas duas tags com classe "catalogo". Isso confunde e deixa mais difícil de entender o que você realmente quer fazer. Sugiro pesquisar sobre CSS Grid e posicionamentos utilizando o CSS. É um tópico essencial para construir layouts. Boa sorte!
    – Jaderson
    Commented 27/10/2020 às 18:00

1 Resposta 1

0

Você só precisa adicionar um elemento com display: flex contendo estes dois elementos...

.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>

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .