0

Hola a todos tengo el siguiente código:

HTML:

.contenedorgrid {
  border: solid 1px black;
  margin: 0px;  margin: 0px;

    
}

.cajas {

  margin: 0px;
  display: flex;
  flex-wrap: wrap;
     padding-left: 30px;
    
    
}

.caja {
  background-color: red;
  margin: 5px;
  height: 200px;
  width: 270px;
   

}
    <div class="contenedorgrid">
                            <div class="cajas">
                                <div class="caja">
                                </div>
                                <div class="caja">
                                k
                                </div>
                                <div class="caja">
                                k
                                </div>
                                <div class="caja">
                                l
                                </div>
                                 <div class="caja">
                                k
                                </div>
                                <div class="caja">
                                k
                                </div>
                                <div class="caja">
                                k
                                </div>
                                <div class="caja">
                                l
                                </div>
                            </div>
                        </div>

Y necesito que la caja se divida en 2, es decir que la parte de arriba sea azul y la parte de abajo sea blanca y no sé como hacerlo, cuando creo otra caja dentro de la otra me la sobre expone raro.

Hay alguna forma de hacerlo?

Tengo mal mi código y por eso no puedo?

gracias!

3
  • 1
    ¿Te entiendo bien si quieres que todas las cajas rojas se dividan en dos partes donde la parte arriba es azul y la parte abajo es blanca?
    – milmal
    Commented el 2 nov. 2020 a las 12:46
  • 1
    Y el texto que pusiste en cada caja donde debe quedar arriba, abajo o al medio?
    – user128299
    Commented el 2 nov. 2020 a las 13:39
  • exacto la parte ade arriba azul y la de abajo blanca. La caja blanca es la que tiene texto. Tiene que verse en solo la caja blanca.
    – Montse Mkd
    Commented el 2 nov. 2020 a las 14:35

1 respuesta 1

1

Puedes usar % para anchura y altura:

.azul {
  height: 50%;
  width: 100%;
  background-color: blue;
}
.blanca {
  height: 50%;
  width: 100%;
  background-color: white;
}

.contenedorgrid {
  border: solid 1px black;
  margin: 0px;
  margin: 0px;
}

.cajas {
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
  padding-left: 30px;
}

.caja {
  background-color: red;
  margin: 5px;
  height: 200px;
  width: 270px;
  border: 2px solid black
}

.azul {
  height: 50%;
  width: 100%;
  background-color: blue;
}

.blanca {
  height: 50%;
  width: 100%;
  background-color: white;
}
<div class="contenedorgrid">
  <div class="cajas">
    <div class="caja">
      <div class="azul"></div>
      <div class="blanca">
      </div>
    </div>
    <div class="caja">
      <div class="azul"></div>
      <div class="blanca">
        k</div>
    </div>
    <div class="caja">
      <div class="azul"></div>
      <div class="blanca">
        k</div>
    </div>
    <div class="caja">
      <div class="azul"></div>
      <div class="blanca">
        l</div>
    </div>
    <div class="caja">
      <div class="azul"></div>
      <div class="blanca">
        k</div>
    </div>
    <div class="caja">
      <div class="azul"></div>
      <div class="blanca">
        k</div>
    </div>
    <div class="caja">
      <div class="azul"></div>
      <div class="blanca">
        k</div>
    </div>
    <div class="caja">
      <div class="azul"></div>
      <div class="blanca">
        l</div>
    </div>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.