Usando o flex box | HTML e CSS

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por JEREMIAS VERÍSSIMO

| 27.3k xp | 9 posts

Boa noite, hoje me veio uma dúvida referente a este tema. E é o seguinte: A imagem abaixa demonstra um projetinho que venho fazendo, é notável que temos 5 moedas na primeira linha. Porém, na segunda, deveria ter a mesma quantidade, mas ao invés de ficar ao lado, a quinta div ficou abaixo, assim ficando só quatro. Gostaria de ajuda para solucionar este problema :) Insira aqui a descrição dessa imagem para ajudar na acessibilidade

/*Código HTML*/
@import url('https://fonts.googleapis.com/css2?family=Nunito&family=Righteous&family=Sarala:wght@700&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
.card
{
    margin-left: 12.5%;
    background: rgb(49, 58, 70);
    color: aliceblue;
    width: 1520px;
    border-radius: 10px;
    height: 500px;
}
#moedas-principais
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    font-family: 'Nunito', sans-serif;
    text-align: center;
    margin-top: 40px;
    flex-wrap: wrap;
    border-bottom: solid;
    gap: 40px;
    font-size: 25px;
    font-weight: 400;

}
.titulo1
{
    font-family: 'Nunito', sans-serif;
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
}
.moeda-dolar
{
    display: flex;
    flex-direction: column;
    padding: 30px;
    gap: 40px;
}
.moeda-euro
{
    display: flex;
    flex-direction: column;
    padding: 30px;
    gap: 40px;   
}
.moeda-gbp
{
    display: flex;
    flex-direction: column;
    padding: 30px;
    gap: 40px;
}
.moeda-ars
{
    display: flex;
    flex-direction: column;
    padding: 30px;
    gap: 40px;
}
.moeda-cad
{
    display: flex;
    flex-direction: column;
    padding: 30px;
    gap: 40px;
}
.nome
{
    font-size: 19px;

}

3 respostas

por Estudante

| 177.1k xp | 195 posts

11/12/2022

Posta o seu html também

por JEREMIAS VERÍSSIMO

| 27.3k xp | 9 posts

11/12/2022

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Titulo</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <main>
            <div class = "card">
                <div class = "titulo1">
                    <h1>Cotação das principais moedas para o Real</h1>
                </div>
                <section id = "moedas-principais">
                    <div class = "moeda-dolar">
                        <p><span id = "variacao"></span></p>
                        <p>R$ <span id = "usd"></span></p>
                        <p class = "nome">Usd dólar / Brl Real</p>
                    </div>

                    <div class = "moeda-euro">
                        <p><span id = "variacao"></span></p>
                        <p>R$ <span id = "eur"></span></p>
                        <p class = "nome">Eur Euro / Brl Real</p>
                    </div>

                    <div class = "moeda-gbp">
                        <p><span id = "variacao"></span></p>
                        <p>R$ <span id = "gbp"></span></p>
                        <p class = "nome">Gbp Libra / Brl Real</p>
                    </div>

                    <div class = "moeda-ars">
                        <p><span id = "variacao"></span></p>
                        <p>R$ <span id = "ars"></span></p>
                        <p class = "nome">Ars Peso / Brl Real</p>
                    </div>

                    <div class = "moeda-cad">
                        <p><span id = "variacao"></span></p>
                        <p>R$ <span id = "cad"></span></p>
                        <p class = "nome">Cad Canadense / Brl Real</p>
                    </div>

                    <div class = "moeda-cad">
                        <p><span id = "variacao"></span></p>
                        <p>R$ <span id = "cad"></span></p>
                        <p class = "nome">Cad Canadense / Brl Real</p>
                    </div>

                    <div class = "moeda-cad">
                        <p><span id = "variacao"></span></p>
                        <p>R$ <span id = "cad"></span></p>
                        <p class = "nome">Cad Canadense / Brl Real</p>
                    </div>

                    <div class = "moeda-cad">
                        <p><span id = "variacao"></span></p>
                        <p>R$ <span id = "cad"></span></p>
                        <p class = "nome">Cad Canadense / Brl Real</p>
                    </div>

                    <div class = "moeda-cad">
                        <p><span id = "variacao"></span></p>
                        <p>R$ <span id = "cad"></span></p>
                        <p class = "nome">Cad Canadense / Brl Real</p>
                    </div>
                </section>
            </div>
        </main>
        <script src="./main.js"></script>
    </body>
</html>

solução!

por Estudante

| 177.1k xp | 195 posts

11/12/2022

1 - Você tem apenas 9 itens no seu html referente as moedas, 
por isso, na "segunda linha", você tem apenas 4 itens, basta adicionar 
mais um grupo de moedas.

2 - Se você quer que TODOS os itens fique um ao lado do outro, 
no css, na classe e id abaixo, altere:

// DE:
.card {
    margin-left: 12.5%;
    background: rgb(49, 58, 70);
    color: aliceblue;
    width: 1520px;
    border-radius: 10px;
    height: 500px;
}

// PARA: 
.card {
    background: rgb(49, 58, 70);
    color: aliceblue;
}


#moedas-principais{
// remova a propriedade abaixo:
   flex-wrap: wrap;

// Adicione a propriedade abaixo:
   overflow-x: scroll;
}


3 - Agora, se você quer que fique 5 itens na "primeira linha" 
e 5 na "segunda linha", agrupe as moedas dentro de outra div, 
por exemplo:

"primeira linha":

<div class="grupo1">
   <div class="moeda-dolar">...Usd dólar / Brl Real...</div>
   <div class="moeda-euro">...Eur Euro / Brl Real...</div>
   <div class="moeda-gbp">...Gbp Libra / Brl Real...</div>
   <div class="moeda-ars">...Ars Peso / Brl Real...</div>
   <div class="moeda-cad">...Cad Canadense / Brl Real...</div>
</div>

"segunda linha":

<div class="grupo2">
   <div class="moeda-cad">...Cad Canadense / Brl Real...</div>
   <div class="moeda-cad">...Cad Canadense / Brl Real...</div>
   <div class="moeda-cad">...Cad Canadense / Brl Real...</div>
   <div class="moeda-cad">...Cad Canadense / Brl Real...</div>
</div>