1

Senhores, preciso formatar minha Div de acordo com a imagem anexada abaixo, com informações de Meta sobre a Div, etc.

Atualmente meu código está quebrando essas informações em linhas, conforme imagem anexada.

Segue um trecho do meu código, espero que consigam me ajudar.

<div id="row1">

            <div class="squareWhite" style="width:380px; font-size: 20px; height: 160px;">
                APPLE<br></br>
                META: <c:out value="${AP.rows[0].META}"/><br></br>
                REALIZADO: <c:out value="${AP.rows[0].REALIZADO}" /><br>/br>
                ACUMULADO: <c:out value="${AP.rows[0].ACUMULADO}" />
            </div>
</div>

Como podem ver acima, tenho uma div principal e outra dentro da mesma.

Meu código acima quando executado retorna as informações da imagem abaixo. Atualmente minhas informações estão quebradas em Linhas

Porém eu preciso que as informações fiquem de acordo com imagem abaixo, como consigo realizar essa alteração dentro Preciso que as informações fiquem dessa maneira

3
  • Manda um desenho do que você quer fazer, eu não entendi!
    – Marcondes
    Commented 30/07/2018 às 12:58
  • Bom dia @Marcondes, a imagem do que eu quero fazer é a segunda que eu postei na pergunta, a primeira é como ela está saindo hoje, aqui no comentário não consigo anexar imagens novamente. Commented 30/07/2018 às 13:01
  • @GabrielPaixãoJustino A primeira imagem que é o cenário atual não tem nada a ver com a segunda... você precisa dar um exemplo do que você quer, mas que tenha lógica em relação ao que você tem. Da uma atualizada na pergunta que esta mais dificil entender o que você quer, do que responder a pergunta. Commented 30/07/2018 às 13:35

1 Resposta 1

1

Gabriel existem vária formas de fazer isso.

Poderia ser da forma mais antiga e não recomendada com floats e clearfix ou até <tabel>. Ou com Flexbox e Grid que é o mais adequado hj em dia.

Eu fiz esse modelo usando o display:grid para montar o grid no pai, e o display:flex nos filhos para alinhar tudo no centro (essa parte do flex não é obrigatória, vc pode alinha com text-aling e line-height, fica a seu critério)

Segue o exemplo:

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background-image: url(http://unsplash.it/g/380/160);
    background-size: cover;
}
.container {
    width: 380px;
    height: 160px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.container div {
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rel, .acu {
    grid-column: span 2;
    background-color: red;
}
<div id="row1">

    <div class="container">
        <div class="marca">Marca</div> 
        <div class="meta">Meta</div>
        <div class="rel">Realizado</div>
        <div class="acu">Acumulado</div>
    </div>
    
</div>

1
  • @GabrielPaixãoJustino cara para não mexer nessa resposta que já está resolvida vou pedir para vc abrir outra pergunta, ai vc pode colocar seu código atualizo, algum imagem do problema na tela e eu te dou uma ajuda para resolver o problema beleza. Só aqui pelo comentário não vou ter condição de te responder direito. Então abre outra pergunta lá com o que tem até o momento agora assim as pessoas podem te ajudar melhor tranquilo
    – hugocsl
    Commented 6/08/2018 às 13:49

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 .