Elementos de altura igual con CSS

Question

Leí sobre varias soluciones diferentes para simular columnas o elementos de igual altura, pero ninguno de ellos realmente captó mi atención porque usaban hacks, diseños HTML increíblemente complejos o atributos no ampliamente admitidos.

Aquí está el ejemplo Fiddle.

Mi objetivo es asegurarme de que todos los elementos tengan la misma altura o, al menos, la altura máxima de los hermanos en la fila.

Una fila está compuesta por 3 elementos (en este caso, no existe un contenedor de fila, pero puedo considerar agregar dicho elemento contenedor).

¿Hay una solución que:

1. no requiere JS
2. doesn't use display: table
3. no utiliza todo el acolchado/margen con valores negativos
4. doesn't require exponential uses of divs and float

Answer 1

Con las restricciones que hizo: No, no hay.

editar: Porque no mencionó esto: podría usar tablas para esto. (Bienvenido a los años 90)

Answer 2

Puede usar la propiedad CSS3 flex para esto. Escribe así:

CSS 

.parent{ 
    display:-moz-box; 
    display:-webkit-box; 
    display:box; 
    -moz-box-orient: horizontal; 
    -webkit-box-orient: horizontal; 
    box-orient: horizontal; 
    width:100%; 
    min-height:200px; 
} 

.parent div{ 
    background:red; 
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1; 
    border:2px solid green; 
} 

HTML

<div class="parent"> 
    <div class="child">1</div> 
    <div class="child">2</div> 
    <div class="child">3</div> 
</div> 

Marque esta http://jsfiddle.net/VkPmg/2/

Answer 3

Si usted tiene un diseño de ancho fijo, que se puede fingir Imagen de fondo por. Imagine un fondo de imagen de mosaico que simule los bordes, solo tendrá que repetir-y en el contenedor principal.

Por ejemplo, si tiene un contenedor de 400 px con 3 cajas de 100 px flotantes (como su violín), tendrá que hacer una repetición de 1x400 en el contenedor principal. Simplemente agregue esta imagen en la posición x de 1 píxel, como el color de borde que utilizó. ¡Y repítelo!

Con esta técnica, su caja no tendrá la misma altura (en realidad) pero la pantalla se verá como la caja porque la caja superior empujará el contenedor y aparecerá el fondo.