Si tengo tres elementos apuntados a la derecha, por qué sigue el orden (ver jsfiddle) el elemento 1 es el primer elemento del lado derecho, cuando el elemento 3 es en realidad el último elemento.HTML float right element order
orden es ahora
[3] [2] [1]
Pero los elementos son en este orden en html
[1] [2] [3]
¿Por qué?
Eso orden invertida 'es el resultado previsto.
Puede buscar en el CSS Specification si lo desea, pero su ejemplo se representa como debería.
Si desea que se muestren en el mismo orden que el marcado, flote el .container a la derecha, quedan sus hijos.
El primer elemento se mueve a la derecha, se detiene cuando llega al borde del recipiente y permite que el siguiente elemento a moverse hacia arriba a su izquierda.
El segundo elemento hace lo mismo, excepto que se detiene cuando toca el borde izquierdo del primer elemento.
... y así sucesivamente.
Usar float o cualquier otra propiedad css no tiene ningún efecto en el código fuente html.
Cualquier elemento que siga al elemento flotante fluirá alrededor del elemento flotante en el otro lado.
Si flota una imagen a la izquierda, cualquier texto u otros elementos que le sigan fluirán a la derecha. Y si hace flotar una imagen a la derecha, cualquier texto u otros elementos que la sigan fluirán a su alrededor hacia la izquierda.
Si ambos elementos se configuran para flotar en la misma dirección (en este caso, derecha), el primero que aparece en nuestro HTML (¡no CSS!) Debe ser el del extremo más próximo al borde.
float La propiedad inicia su análisis desde la derecha más a la izquierda.
ejemplo:
<div class="block block-1"></div>
<div class="block block-2"></div>
<div class="block block-3"></div>
con esta regla:
.block {
float: left;
}
block-3 consigue alineado a la izquierda, tenemos: block-3, block-1, block-2
block-2 consigue alineado a la izquierda, tenemos: block-2, block-3, block-1
block-1 obtiene alineado a la izquierda, tenemos: block-1, block-2, block-3
con esta regla:
.block {
float: right;
}
block-3 consigue alineado a la derecha, tenemos: block-1, block-2, block-3
block-2 consigue alineado a la derecha, tenemos: block-1, block-3, block-2
block-1 consigue alineado a la derecha, tenemos: block-3, block-2, block-1
Si los quieres float:right en el orden correcto: block-1, block-2, block-3
entonces usted debe intercambiarlos en el marcado
<div class="block block-3"></div>
<div class="block block-2"></div>
<div class="block block-1"></div>
ACTUALIZACIÓN: o envuelva a todos en una matriz, y sólo flotar padres
Esto es porque en su html, se ha especificado que [elemento 1] que aparezca primero alineado a la derecha. Por lo tanto, esto es exactamente lo que hace el navegador. Cuando, en tu html, vas a mostrar [elemento 2], flotando hacia la derecha, el navegador hace esto PERO DESPUÉS de dar prioridad al elemento [1] para que se muestre a la derecha ya que [elemento 1] fue el primero en tu HTML.
Espero que esto tenga sentido.
Probablemente haya resuelto algún problema para OP, pero en realidad no ha dicho qué le da prioridad a un elemento flotante. –
Prioridad: primero en llegar, primer servicio. – Ralf