¿Por qué no puedo alinear a la derecha un elemento con pantalla: bloque y ancho: X?

Question

total pregunta n00b aquí (al menos para la elite CSS):

Por qué es que un elemento con tanto display: block; y no parece un valor para width a caer en línea con la propiedad text-align de su padre? Es decir, siempre parece insistir en mantenerse a la izquierda.

Here is a jsFiddle illustrating the issue.

Obviamente, ésta debe ser compatible con la especificación CSS (Quiero decir, si Chrome, Firefox y Opera todos están de acuerdo en ello, tengo muy pocas dudas); Simplemente no lo entiendo.

Answer 1

El texto está alineado dentro de un cuadro de 150 píxeles. Eso es correcto. Un elemento de bloque no se alineará con text-align en el elemento primario.

Para solucionar esto, necesita usar display: inline-block o float: right en el .width div.

edición: con flotador, añadir clear: right para evitar que estar en la misma línea que el anterior div

Answer 2

Es porque su clase es de ancho de bloque, no de ancho. Cambie el nombre de la clase block_width y luego en su CSS haga la última .block_width en lugar del .width que tiene y funciona

Answer 3

<span> es un elemento con display: inline. Elementos con display: inline siguiendo la alineación del texto. Los elementos con display: block no siguen la alineación del texto están alineados PROPIO por el flotador.

Cuando solo cambia el ancho del elemento permanece en línea, siguiendo la alineación del texto, pero cuando cambia la pantalla para bloquear y cambiar su ancho, su contenido asume la alineación del texto, pero el elemento no. Traté de ilustrar esto con un poco de color en su código;)

http://jsfiddle.net/Z6Twf/3/