¿Hay un diseño simple de 3 columnas, CSS puro?

Uno que no requiere lo siguiente:¿Hay un diseño simple de 3 columnas, CSS puro?

La dependencia de las imágenes (es decir, "columnas de imitación")
Una especie de rareza o "piratear" puesto en concreto para IE
requiere IE para funcionar en el modo de peculiaridades
no tiene extrañeza como uno de los tres DIVs solapan los otros (es decir, "Santo grial")
márgenes establecidos a altos números negativos colocándolos bien fuera de la pantalla de visión (de nuevo "santo grial" de diseño)

No puedo encontrar un diseño de 3 columnas en CSS que no se base en uno de los anteriores. Y confiar en uno de los anteriores parece negar muchas de las ventajas del uso de CSS sobre tablas. No quiero tener que sacar Photoshop y cambiar el tamaño de una imagen cada vez que quiera cambiar el ancho de mi columna izquierda. Y no quiero tener que sacar la calculadora para calcular cuántos píxeles del lado de la pantalla debe tener mi DIV.

Debo mencionar que estoy buscando un diseño de altura igual.

¿Alguien?

EDIT: Estoy buscando un ancho del 100%, con la columna central siendo líquida.

EDITAR: También espero especificar el ancho de las columnas izquierda y derecha en píxeles.

EDITAR: Los fondos pueden ser transparentes, pero me gustaría una línea divisoria entre las columnas que se extiende hasta arriba y abajo.

Fuente

2009-05-15 Sean

Errare humanum est - No creo que puedas escapar sin hacks. Especialmente debido a la misma altura. Depende, por supuesto, de la versión de CSS que desee que sea su base. –

Debe especificar sus requisitos para bordes y colores/imágenes de fondo. 3 columnas con fondos transparentes y sin bordes es fácil de hacer. –

No existe tal cosa como "simple" cuando hablamos de CSS.

Pero hay una solución simple que es cross browser, se degrada graciosamente y cumple totalmente con HTML y CSS: use una tabla con tres columnas.

Razonamiento: los DIV no están diseñados para tener la misma altura dinámica. Por lo tanto, CSS no tiene soporte para esto. Si necesita un elemento de bloque que se asegure de que sus hijos tengan la misma altura, para eso sirven las tablas.

[EDIT] Perdón por ofender a todos tus fanáticos de CSS pero, francamente, cuando algo no está diseñado para hacer algo y lo abusas, y no funciona, deja de quejarte, ¿de acuerdo? Un DIV no es una TABLA y no se puede usar como uno sin depender de los hacks.

[Edit2] Como se ha dicho ya en various places, la razón para no usar tablas en el formato era que, en los primeros tiempos, las mesas estaban la única elemento de diseño y que conducen a HTML que tenía docenas de tablas anidadas. Eso es malo. Pero eso no significa que no debe usar una sola tabla para poner todo en su lugar y luego confiar en CSS para que las cosas en su interior se vean bien.

Un cerebro es como un paracaídas: Es bueno tenerlo pero solo es útil cuando está abierto.

Fuente

2009-05-15 09:24:15

Las tablas se diseñaron para expresar relaciones entre bits de datos (con cada elemento en una fila teniendo algo en común y cada elemento en una columna teniendo algo en común). Tener todas las celdas en una fila para compartir una altura es una consecuencia, no una causa. – Quentin

+10

Bueno, tienes un objetivo y tienes dos herramientas. Uno está mal visto y el otro no se ajusta a la factura ... ¿cuál usas? –

+1 no es ninguna pena usar una tabla para el diseño, siempre y cuando se mantenga simple. –

Estoy de acuerdo con Robert. Debido a que los navegadores interpretan las reglas de CSS y presentan la página final de manera diferente, dudo que encuentres una solución perfecta sin ser más flexible en tus requisitos.

Fuente

2009-05-15 09:23:36 Nick

Puede lograr esto usando jS.

Si tuviera que crear 3 divisiones, un flotante dejó una flotante a la derecha y la mitad como margen & a la derecha con un ancho para centrarlo.

Luego, con un poco de JS, cada div tiene su propia ID, puede calcular su altura, establezca los 2 más bajos en el valor más alto.

Bastante simple con Jquery.

Fuente

2009-05-15 10:13:43 Lee

Cierto, es fácil con javascript ... pero pidió una solución CSS pura. –

-2

¿dividir la página en tres columnas, la misma altura?

<html> 
<head> 
<style type="text/css"> 
#col_wrapper{ 
    height: 400px; 
} 

.col{ 
    width: 33%; 
    float:left; 
    height: 100%; 
} 
</style> 
</head> 
<body> 
<div id="col_wrapper"> 
    <div class="col"> 
     one 
    </div> 
    <div class="col"> 
     two 
    </div> 
    <div class="col"> 
     three 
    </div> 
</div> 
</body>

no quirks and pretty plain.

Fuente

2009-05-15 10:31:09 gunnarsson

Debería haber mencionado que la altura fija no funcionaría. Una página puede tener 5 párrafos de texto en la columna central, otra podría tener 25. – Sean

http://960.gs/

Éste se puede utilizar para un diseño de 3 columnas (y para varias otras disposiciones). Personalmente, no creo que sea una buena idea usar divs para todo, pero es simple y bueno ... funciona.

editar: Para un diseño con un ancho del 100%, http://www.alistapart.com/articles/fluidgrids/ puede ayudar, pero no estoy seguro si este tipo de diseño todavía califica como "simple".

Fuente

2009-05-15 10:39:25

Lo siento, debería haber mencionado que estoy buscando un ancho del 100% (con la columna central siendo líquida). – Sean

Sí, el de una lista aparte parece un poco complejo. Uno de esos en los que no está claro cuál es el menos deseable, el uso de una hoja de estilo que sea complicada o el uso de una tabla, aunque las tablas no estén diseñadas para el diseño. – Sean

Es posible que pueda adaptarse:

http://matthewjamestaylor.com/blog/perfect-3-column.htm

Fuente

2009-05-15 12:25:15

Ese se ve prometedor, pero creo que debería haber mencionado que estoy buscando uno con columnas de ancho de píxel, no por ancho de porcentaje. Ese mismo sitio web contiene una plantilla para anchuras de píxeles (el "santo grial" que mencioné anteriormente) pero es una hoja de estilo muy intrincada, que diría que es menos conveniente que usar tablas para el diseño. Sin embargo, sería una muy buena para alguien que necesita columnas de ancho porcentual. – Sean

Aquí hay una versión de ancho de píxel: http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm –

YAML

"Sin embargo, otro de varias columnas diseño" (YAML) es una (X) el marco HTML/CSS para la creación moderna y diseños flotado flexibles . La estructura es extremadamente versátil en su programación y absolutamente accesible para los usuarios finales.

Contiene algunas correcciones de errores de IE, pero puede eliminarlas.

Fuente

2009-05-15 12:33:09 mjn

¡Demasiadas cosas llamadas YAML en estos días! –

¿Hay un diseño simple de 3 columnas, CSS puro?

Respuesta

Cuestiones relacionadas