Mostrando entradas con la etiqueta column-count. Mostrar todas las entradas
Mostrando entradas con la etiqueta column-count. Mostrar todas las entradas

martes, 29 de enero de 2013

Como dividir un bloque con css

Estoy trabajando con drupal y me muestra un contenido organizado en div's uno debajo de otro, me interesa darle algún estilo, y separarlo en columnas de modo que optimize el espacio de la información en la pantalla, pensé que iba a ser difícil pero fue así de sencillo:

Ubique el bloque que contenía a los div que quería colocar en columnas e hice lo siguiente:

   .clasedelBloque {
      -webkit-column-count: 2;
      -moz-column-count: 2;   
      -o-column-count: 2;
      -webkit-column-gap: 25px;
      -moz-column-gap: 25px;
      -o-column-gap: 25px;
    }

Acontinuación detallo cada paso:


  1. Para dividir el bloque en las columnas se usa la sintaxis  column-count para mi ejemplo la divido en dos (2) columnas  con un prefijo según el navegador:
                -webkit-column-count    (Para Chrome, Chromium,Safari)
                -moz-column-count         (Para Firefox)
                -o-column-count              (Para Opera)

  2. Las siguientes lines es para dar un espaciado entre ambas columnas
          -webkit-column-gap: 25px;      (Para Chrome, Chromium,Safari)
          -moz-column-gap: 25px;         (Para Firefox)
          -o-column-gap: 25px;           (Para Opera)
  3. Y finalmente tenemos nuestras dos columnas con un pequeño espaciado entre ellas de 25px,  hay atros atributos que se pueden agregar pero por el momento esto es lo que me interesa.