How do I make the internal elements of ASIDE stay horizontal?

Question

How do I make the internal elements of ASIDE stay horizontal?

Navigation

#1 by (1 votes)

2

How do I make the inner elements of ASIDE stay horizontally on the same line, side by side without breaking when resizing the browser.

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>

html5 css

asked by anonymous 28.06.2017 / 17:39

1 answer

Execute function after certain time that has stopped typing (keyup) VueJS or JS Pure TypeScript supports an equivalent implementation of trait?

score 1 · Accepted Answer

Change your CSS code by:

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%;
}