Necesito ayuda con mi diseño. Quiero mostrar tres de igual altura cajas junto a la otra, al igual que este arte ASCI:Esquinas redondeadas en un diseño de celda de tabla css?
+------+ +------+ +------+
| | | | | |
| | | | | |
| | | | | |
+------+ +------+ +------+
También tengo an example online (with all the CSS).
El contenido de los cuadros varía en altura. Lo difícil es que estos cuadros también deben tener esquinas redondeadas. Para eso estoy usando la técnica de "puertas correderas" . Básicamente, el margen de beneficio de un cuadro es algo así:
<div class="box">
<div class="box-header">
<h4>header</h4>
</div>
<div class="box-body">
<p>Contents</p>
</div>
</div>
Cuatro elementos de bloque por lo que pueden hacer esquinas redondeadas y bordes con imágenes de fondo. La esquina superior derecha va en la h4. La esquina superior izquierda va en el encabezado de la caja. La esquina inferior derecha va en la casilla div exterior y la esquina inferior izquierda va en el cuerpo de la caja.
Estoy usando la pantalla CSS: table-cell para hacer que los tres cuadros tengan la misma altura , pero aquí comienza mi problema. Todos los elementos de caja son ahora de de igual altura, pero los elementos de caja no son de igual altura porque el contenido no es de la misma altura. Resultado: las esquinas inferiores a la derecha no están en la posición correcta. Ver también el enlace que publiqué.
¿Cómo puedo solucionar eso? Todas las divisiones de caja son iguales en altura ahora. Me gustaría como box-body para ampliar para usar toda la altura disponible, incluso cuando el contenido es corto. Probé la altura: 100% pero eso no funciona. ¿Cómo puedo hacer que funcione?
¿O existe una forma alternativa de lograr lo que quiero? No puedo usar algo así como faux-columns porque defino el ancho de los cuadros en ems. Eso significa que no puedo darle a la caja div una sola imagen de fondo que proporciona en ambas esquinas inferiores.
Google está siendo absolutamente inútil aquí. Cualquier consulta que implique "esquinas" y "tabla" simplemente me da un montón de enlaces a los tutoriales de 1990 que usan una tabla de 3x3 para esquinas redondeadas.
En cuanto a la compatibilidad del navegador, sería bueno si IE7/8 puede manejarlo también, pero no es necesario (puedo reemplazarlo con flotadores de altura desigual en ese caso). Para el sitio web que estoy desarrollando, estimo que la cuota de mercado de IE es del 20% o menos. No me importa IE6 en absoluto.
¡Todos los consejos son muy apreciados!
+1 por no preocuparse por IE6 – Jason