2

Como faço para que os elementos interno do ASIDE permanecerem horizontalmente na mesma linha, um ao lado do outro sem quebrar ao redimensionar o navegador.

CSS

aside{
  background-color: #222;
  margin-top: 10px;
  margin-left: 10px;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 10px;
  box-sizing: border-box;

}
aside figure{
  float: left;
  margin-bottom: 20px;
  margin-right: 10px;
}

aside figure img{ /* redimensionar imagem */
    max-width: 300px;
    width: 100%;
}

HTML

<aside>


        <figure>
            <a href="#">
            <img src="./imagens/praias.png" width="300" height="400">
            </a>
        </figure>

        <figure>
            <a href="#">
            <img src="./imagens/praias.png" width="300" height="400">
            </a>
        </figure>

        <figure>
            <a href="#">
            <img src="./imagens/praias.png" width="300" height="400">
            </a>
        </figure>

        <figure>
            <a href="#">
            <img src="./imagens/praias.png" width="300" height="400">
            </a>
        </figure>

    </aside>

1 Resposta 1

1

Altere seu código CSS por:

aside{
  background-color: #222;
  margin-top: 10px;
  margin-left: 10px;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
}
aside figure{
  width: 25%; /*Para o caso de 4 colunas. Altere conforme a necessidade*/
  margin-bottom: 20px;
  margin-right: 10px;
}

aside figure img{ /* redimensionar imagem */
    max-width: 300px;
    width: 100%;
}
1
  • 1
    Funcionou perfeitamente! Muito obrigado.
    – Gladison
    Commented 28/06/2017 às 15:58

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 .