Правий порядок елементів з плаваючим HTML

Якщо у мене є три елементи, розміщені праворуч, чому порядок слідує (див. Jsfiddle), елемент 1 є першим елементом праворуч, коли елемент 3 насправді є останнім елементом.

Замовлення вже зараз

[3] [2] [1]

Але елементи в такому порядку в html

[1] [2] [3]

Чому?

http://jsfiddle.net/A9Ap7/

Цей «інвертований порядок» - передбачуваний результат.

Якщо ви хочете, ви можете скористатися специфікацією CSS , але ваш приклад відображається як слід.

Якщо ви хочете, щоб вони відображалися в тому ж порядку, що і розмітка, плавайте .containerправоруч, а його дочірні ліві.

Оновлено jsfiddle

Перший елемент рухається вправо, зупиняється, коли потрапляє на край контейнера, і дозволяє наступному елементу рухатись ліворуч.

Потім другий елемент робить те саме, за винятком того, що зупиняється, коли потрапляє в лівий край першого елемента.

… і так далі.

floatвластивість починає свій аналіз від крайньої праворуч до самої лівої.
напр .:

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

з цим правилом:

.block {
    float: left;
}

block-3вирівнюється ліворуч, маємо: block-3, block-1, block-2
block-2вирівнюємо ліворуч, маємо: block-2, block-3, block-1
block-1вирівнюємо ліворуч, маємо:block-1, block-2, block-3

з цим правилом:

.block {
    float: right;
}

block-3вирівнюється вправо, маємо: block-1, block-2, block-3
block-2вирівнюємо вправо, маємо: block-1, block-3, block-2
block-1вирівнюємо вправо, маємо:block-3, block-2, block-1

Якщо ви хочете, щоб вони були float:rightв правильному порядку: block-1, block-2, block-3
тоді вам слід поміняти місцями в розмітці

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

ОНОВЛЕННЯ: Або оберніть їх усіх у батьківському та лише плаваючому батькові

Використання float або будь-якої іншої властивості css не впливає на вихідний код html.

Будь-який елемент, що слідує за плаваючим елементом, буде обтікати навколо плаваючого елемента з іншого боку.

Якщо ви плаваєте за зображенням ліворуч, будь-який текст або інші елементи, що слідують за ним, будуть обводити його праворуч. А якщо ви наведете зображення праворуч, будь-який текст чи інші елементи, що слідують за ним, будуть обтікати його ліворуч.

Це пов’язано з тим, що у вашому html, ви вказали, що [елемент 1] відображатиметься спочатку вирівняним праворуч. Отже, це саме те, що надає браузер. Коли у вашому html ви продовжуєте відображати [елемент 2], плаваючи праворуч, браузер робить це АЛІ ПІСЛЯ надаючи [елементу 1] пріоритет відображення праворуч, оскільки [елемент 1] прийшов першим у вашому HTML.

Сподіваюся, це має сенс.

Якщо обидва елементи мають плавати в одному напрямку (в даному випадку - праворуч), першим, який з’явиться в нашому HTML (а не CSS!), Буде той, що знаходиться на дальній стороні, близько до краю.