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.

No hay comentarios: