Cómo utilizar diseños de tres columnas en css3
Video: Curso completo de Bootstrap 2.- La Grid, entendiendo el sistema de rejillas
diseños de tres columnas en CSS3 se utilizan comúnmente en los sitios que proporcionan una lista de enlaces genéricos en un lado de la página, contenido en el medio, y enlaces de publicidad o específicos de la página en el otro lado.
Las páginas de diseño Dynamic Drive muestran un uso de este trazado donde se ve una lista de ofertas en el panel izquierdo, los diseños reales en el panel de contenido, y una lista de patrocinadores en el panel derecho.
Hay variaciones sobre este tema. Un ejemplo aparece en la La sede electrónica Frontier Foundation donde se ve enlaces del sitio en el panel izquierdo, información sobre FEP en el panel de contenido y enlaces de noticias en el panel derecho.
Se puede ver una lista de los tres diseños de columna en Biblioteca CSS. Al igual que con los diseños de dos columnas, se encuentra una mezcla de diseños fijos y fluidos cuando se trabaja con los diseños de tres columnas.
Por supuesto, hay más tipos de diseños de tres columnas que no son de diseños de dos columnas debido a que más permutaciones son posibles. En algunos de los diseños, una de las columnas laterales es fluido, como es la columna de la contenido. Incluso hay una presentación en la que las tres columnas son fluidos, lo que significa que todo el diseño cambiará el tamaño sí para que coincida con el tamaño actual ventana del navegador.
La un tipo de de tres columnas diseño falta en este sitio es uno en el que están alineadas las dos columnas, una sobre la parte superior de la otra. Este formulario se utiliza comúnmente para la documentación en línea, tales como el API Java 7.
Una forma de evitar este problema es el uso de otro producto, tal como el plug-in Layout interfaz de usuario para jQuery. Otra alternativa es modificar el CSS fijo Disposición # 3.3- (fijo-fijo-fijo) diseño.
No es necesario realizar ningún cambio a la parte HTML de este ejemplo. La versión HTML5 de la disposición se parece a esto. (Puede encontrar el código completo para este ejemplo en la carpeta Capítulo 07 de la código descargable como ThreeColumnHelpLayout.HTML.)
CSS diseño fijo # 3.3- (fijo-fijo-fijo) CSS diseño fijo # 3.3- (fijo-fijo-fijo)
Columna contenido: Fijo
Columna izquierda: 180px
Columna derecha: 190px
Video: HTML 5 + CSS 3 - CSS Columnas
El CSS comienza con el código suministrado por el sitio. Con el fin de modificar el código para proporcionar el formato requerido para la documentación de ayuda, es necesario hacer algunos cambios pequeños. El siguiente procedimiento se explica cómo hacerlo.
Cambie la propiedad margin-left para el estilo #rightcolumn a -840px.
Este cambio hace que las columnas de la derecha e izquierda pares.
Cambiar la propiedad de ancho para el estilo #rightcolumn a 180px.
Este cambio hace que la derecha y columnas de la izquierda anchos iguales.
Añadir un valor de propiedad altura de 250 píxeles a ambos los #leftcolumn y #rightcolumn estilos.
Video: Multiples Columnas con Html5 y CSS3
Este cambio permite que las dos columnas para utilizar la mitad del espacio disponible para el contenido.
Añadir un valor de propiedad margin-top de 250 píxeles para el estilo #rightcolumn.
Este cambio coloca la columna de la derecha por debajo de la columna de la izquierda.
Cargar la página resultante en su navegador.
Usted ve un diseño de tres columnas como ésta:
Las plantillas Dynamic Drive son flexibles y con frecuencia pueden servir para otros fines con unos pequeños cambios. Lo importante es comenzar con un diseño que se ve cerca de lo que desea utilizar.