0

Senhores, estou tentando inserir uma grid dentro das minhas Divs, porém a mesma está em conflito com a parte de cima, conforme imagem em anexo, segue um trecho do meu código onde ocorre o problema.

Eu tenho a div row1 que é a parte de cima e a div Problema Formatação Grid/Divrow2 que é a parte de baixo.

#row1{
   height: 160px;
   width: 100%;
   margin-bottom:200px;
}

#row2{
   height: 160px;
   width: 100%;
   margin-bottom:200px;
}

.container {
   width: 500px;
   height: 160px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-left:100px;
   float:left;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 20px;
   font-weight: bold;
   text-align: center;
}

.container div {
   display: flex;
   justify-content: center;
   align-items: center;
}

.rel, .acu {
   grid-column: span 2;
   background-color: white;
}

HTML:

<div id="row1">

    <c:if test ="${realizadoSG <metaSG}">
    <div class="container">
       <div class="marca" ><h1>SAMSUNG</h1></div> 
       <div class="meta">META: <fmt:formatNumber value = "${SG.rows[0].META}" type="currency"/></div>
       <div class="rel" style= "background-color: red; color: white;" >REALIZADO: <fmt:formatNumber 
        value = "${realizadoSG}" type="currency"/></div>
    <div class="acu">ACUMULADO: <c:out value="${SG.rows[0].ACUMULADO}"/>%</div>

</div>

<div id="row2">

    <c:if test ="${realizadoAS <metaAS}">
    <div class="container">
       <div class="marca"><h1>ASUS</h1></div> 
       <div class="meta"><h1>META:<fmt:formatNumber value= "${AS.rows[0].META}" type = "currency"/></h1></div>
       <div class="rel" style= "background-color: red; color: white;" >REALIZADO: <h1> <fmt:formatNumber 
      value= "${realizadoAS}" type = "currency"/></h1></div>
    <div class="acu">ACUMULADO:<h1><c:out value="${AS.rows[0].ACUMULADO}"/>%</h1></div>


</div>

1 Resposta 1

2

O seu problema provavelmente está aqui, esqueceu de fechar a tag div vou comentar onde ela deveria estar fechada, dentro do container segue com a correção

<div id="row1">

    <c:if test ="${realizadoSG <metaSG}">
    <div class="container">
       <div class="marca" ><h1>SAMSUNG</h1></div> 
       <div class="meta">META: <fmt:formatNumber value = "${SG.rows[0].META}" type="currency"/></div>
       <div class="rel" style= "background-color: red; color: white;" >REALIZADO: <fmt:formatNumber 
        value = "${realizadoSG}" type="currency"/></div>
    <div class="acu">ACUMULADO: <c:out value="${SG.rows[0].ACUMULADO}"/>%</div>
    </div><!--Falta essa tag -->

</div>

<div id="row2">

    <c:if test ="${realizadoAS <metaAS}">
    <div class="container">
       <div class="marca"><h1>ASUS</h1></div> 
       <div class="meta"><h1>META:<fmt:formatNumber value= "${AS.rows[0].META}" type = "currency"/></h1></div>
       <div class="rel" style= "background-color: red; color: white;" >REALIZADO: <h1> <fmt:formatNumber 
      value= "${realizadoAS}" type = "currency"/></h1></div>
    <div class="acu">ACUMULADO:<h1><c:out value="${AS.rows[0].ACUMULADO}"/>%</h1></div>
  </div><!--Falta essa tag -->

</div>

No css tente isso

#row1{
   height: 160px;
   width: 100%;
   margin-bottom:200px;
   clear: both;
   padding: 50px 0;
}

#row2{
   height: 160px;
   width: 100%;
   margin-bottom:200px;
   clear: both;
   padding: 50px 0;
}
3
  • a tag já estava fechada em meu código, acabei não inserindo aqui, mesmo assim não funciona... Commented 6/08/2018 às 15:34
  • Experimente então a nova alteração que irei fazer Commented 6/08/2018 às 15:40
  • Anderson, obrigado pela ajuda, consegui ajustar como eu queria, adicionei o Padding-top:200px; na minha row2, e a div foi ajustada. Commented 6/08/2018 às 15:57

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 .