Layout CSS alineado a la derecha con inline-block

Float o inline-block

Desde que se abandonó el uso de tablas y se empezó a aprovechar CSS para diseñar layouts, float se ha convertido en una de las propiedades mas utilizada. Aunque float no fue concebida para organizar un layout, ha funcionado relativamente bien, y ya estamos acostumbrados a lidiar con los problemas que a veces surgen.

Recientemente se ha hablado mucho de usar display: inline-block como alternativa a los floats. Esta tampoco es la solución ideal, pero nos brinda otras posibilidades. Ambos enfoques tienen sus ventajas y desventajas, y algunas características en común.

Layout alineado a la derecha

Una de las desventajas de inline-block es que los elementos siempre fluyen de izquierda a derecha. Es el equivalente a usar float: left. Lo podemos ver en este ejemplo.

Con float: right podemos hacer que los elementos fluyan desde la derecha, y en principio no hay equivalente usando display: inline-block. Sin embargo, con un pequeño hack podemos lograrlo.
Continúa leyendo Layout CSS alineado a la derecha con inline-block