1

Por CSS estoy añadiendo columnas, necesito que sea un tamaño fijo, por lo que no me sirve utilizar FlexBox.

El problema es que al utilizar column-count se me forma un espacio en blanco entre los div, como pueden ver aquí.

introducir la descripción de la imagen aquí

El codigo html es el siguiente:

 <div class="div-organizacion">
    <div>
        <h2>ORGANIZACIÓN</h2>
        hola
    </div>
    <div>
        <h2>RUT ORGANIZACIÓN</h2>
        hola
    </div>
</div>

En el CSS lo tengo de esta manera:

.div-organizacion{
 column-count: 2;
 margin: 0;
 padding: 0;}

¿Alguna solución? u ¿Otra forma de hacerlo?

0

2 respuestas 2

1

Añade una regla deestilo para bajar la segunda columna. Por ejemplo;

 .div-organizacion div:nth-child(2){
  display:block;
  position:relative;
  top:20px;
 }
1
  • Gracias, me resulto mejor de esta manera.
    – noobdev
    el 2 ago. 2021 a las 22:06
0

Te puedes apoyar de la propiedad grid-column-gap, la cual es aplicable para:

  • Elementos multi columna
  • Contenedores grid
  • Contenedores flex

Dando un valor de 0 podrás eliminar el espacio entre las columnas generadas.

Te dejo este ejemplo:

    <style>
    
      .div-organizacion {
        border: 1px solid;
        column-count: 2;
        grid-column-gap: 0;
      }
      .clase {
        border: 1px solid red;
      }
    </style>
    
    <div class="div-organizacion">
        <div class="clase">
            <h2>ORGANIZACIÓN</h2>
            hola
        </div>
        <div class="clase">
            <h2>ORGANIZACIÓN</h2>
            hola
        </div>
    </div>

Aunque también lo puedes manejar con la sintaxis de column-gap y debería funcionarte, pero personalmente me apegaría a la sintaxis de MDN.

Tu Respuesta

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

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