Línea de capas alineadas

[weissbier]

Estoy creando un sistema muy simple de representación matemática, y para ello uso capas con imágenes de fondo, flotadas una junto a la otra. Esto es lo que tengo:



Tengo un problema a la hora de representar matrices (último bloque) y es que mi intención era hacer que la caja se adapte a las líneas de dentro (2, 3, 4 etc....) pero por lo que he leído es imposible alinear todos los bloques (divs flotados) verticalmente.

Como alternativa (sabiendo que genralmente hay 2, 3 líneas) ¿podría hacer (como chapuza) que estas se alineen dentro del div verticlamente?.

Las columnas (del tercer bloque) son <ul>, cada una con sus respectivos <li> hacia abajo. Esto es porque necesito que los términos se mantenga alineados como si fuese en una tabla

¿Es realmente imposible lo planteado inicialmente? ¿Es realmente imposible alinear verticalmente una fila de divs flotados del cuál NO conozco la altura absoluta?.

Un saludo y gracias de antemano.

[madhatterdef]

sin saber la altura me parece que no se puede (al menos hasta donde se)

pero


porque no usas una sola imagen con todo el contenido así podrías hacer que queden alineados entre si

[C2am]

Otra opción es aplicar display:inline-block , así no tendrás problemas con las diferencias de altura.
A ver que te parece este ejemplo tratando de mantener tus premisas:

Código HTML:

<div id="ecuacion">
    <div> nominador <br/><hr/> denominador<hr/>denominador</div>
    <div> = </div>
    <div> nominador <br/><hr/>denominador</div>
    <div> = </div>
    <div> nominador <br/><hr/>denominador<br/><hr/>raiz cuadrada de -1<br/>otra raiz al límite</div>
</div>
 

Código CSS:

#ecuacion{
width:100%;
border:1px solid blue;
}
#ecuacion div{
    display:inline-block;
vertical-align:middle;
    background:#eee;
}
 

Ejemplo en vivo y en directo

Saludos

[weissbier]

Wow!... es muy interesante tu aporte. No conocía la propiedad (y además está disponible desde CSS2)... creo que podré solucionar gran parte del problema con esto. Ambos merecéis Karma por el tiempo dedicado, gracias.

Intentaré desarrollarlo algo más complejo ahora que sé cómo hacerlo, volveré para compartirlo. Un saludo y gracias de nuevo.

[madhatterdef]

de nada
espero alguna vez poder ayudarte mas