Cómo crear varias columnas en un div

Me preguntaba cómo crearía varias columnas en un div. Es para un pie de página y quiero un mapa del sitio, enlaces a las redes sociales, etc.Cómo crear varias columnas en un div

Iba a usar <multicol> pero luego leí que estaba obsoleto, así que me desanimó de usarlo.

Básicamente tengo un 80% de DIV ancho y necesito tres columnas en él. Preferiblemente cada uno con un margen.

Css:

div.bottom 
     { 
      height: 200px; 
      width: 80%; 
      margin-left: auto; 
      margin-right: auto; 
      margin-top: none; 
      margin-bottom: none; 
      border-top: 4px solid #00ccff; 
      border-bottom-left-radius: 15px; 
      border-bottom-right-radius: 15px; 
      background-color: #575757; 
     }

Sólo necesito el código HTML ahora. Gracias por tu tiempo.

Fuente

2012-05-20 Josh Dempsey

¿Qué HTML estás tratando de dar estilo? No somos, a pesar de las apariencias en contrario, físicamente inclinados o capaces. Danos una idea de cómo debería verse, una vez que tenga el estilo. –

Solo necesito las columnas establecidas para poder ingresar texto en las tres columnas. –

Así que me reuní, pero todavía estamos adivinando si queremos que las columnas fluyan, de una a la siguiente, o si queremos listas independientes en cada columna. Por favor ayudanos a ayudarte***. –

Crea tres divs con float: left; (o derecha) y dales un width exacto.

<div class="bottom"> 
    <div style="float: left; width: 33%;"></div> 
    <div style="float: left; width: 33%;"></div> 
    <div style="float: left; width: 33%;"></div> 
</div>

Véalo in action.

Fuente

2012-05-20 20:20:22 Czechnology

Esto no funciona si la columna div tiene bordes. Se ajustará a la siguiente fila si la fila no es lo suficientemente amplia. ¿Cómo se manejan las fronteras en el dimensionamiento de cada columna? –

Brad, eso se debe al modelo de caja de CSS estándar, que incluye el relleno y el borde en el tamaño. Puede ajustar este comportamiento usando la propiedad 'box-sizing'. – Czechnology

Eso hizo el truco. ¡Gracias! –

Cómo crear varias columnas en un div

Respuesta

Cuestiones relacionadas