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.
Consideremos el siguiente código:

<div class="container">
<div class="box">inline-block 1</div>
<div class="box">inline-block 2</div>
<div class="box">inline-block 3</div>
</div>

Podemos posicionar los elementos horizontalmente (de izquierda a derecha) con el siguiente css:

.box {
  width: 100px;
  height: 20px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  display: inline-block;
  background: #ccf;
}

Ahora, si queremos que los elementos fluyan de derecha a izquierda, solo debemos agregar esto:

.container {
  direction: rtl;
}

La propiedad direction se utiliza para mostrar textos en árabe de forma correcta. Aunque, como vemos, también le podemos dar otros usos.

Dentro de poco, nos podremos olvidar de float e inline-block, ya que tendremos a nuestra disposición flexbox.