HTML-код поплавка правильный порядок элементов

Если у меня есть три элемента, выставленные справа, почему порядок следующий (см. jsfiddle) элемент 1 является первым элементом на правой стороне, когда элемент 3 На самом деле последний элемент.

Заказать сейчас 

[3] [2] [1]

но элементы находятся в таком порядке в html

[1] [2] [3]

почему?

http://jsfiddle.net/A9Ap7/

6 60
html css

6 ответов:

что "перевернутый порядок" является предполагаемым результатом.

вы можете копаться в спецификация CSS если вы хотите, но ваш пример оказывает, как это должно.

Если вы хотите, чтобы они отображались в том же порядке, что и разметка, плавают .container справа, его дети слева.

обновил jsfiddle

83

первый элемент перемещается вправо, останавливается, когда он касается края контейнера,и позволяет следующему элементу перемещаться влево.

второй элемент делает то же самое, за исключением того, что он останавливается, когда он попадает в левый край первого элемента.

... и так далее.

15

использование float или любого другого свойства css не влияет на исходный код html.

любой элемент, который следует за плавающим элементом, будет обтекать плавающий элемент с другой стороны.

Если вы перемещаете изображение влево, любой текст или другие элементы, следующие за ним, будут обтекать его справа. И если вы переместите изображение вправо, любой текст или другие элементы, следующие за ним, будут обтекать его слева.

3

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 parent

3

Если оба элемента установлены в одном и том же направлении (в данном случае - вправо), первый, который появляется в нашем HTML (не CSS!) быть один на дальней стороне близко к краю.

0

Это связано с тем, что в вашем html вы указали, что [элемент 1] будет отображаться сначала выровненным справа. Следовательно, это именно то, что браузер отображает. Когда в вашем html вы переходите к отображению [элемента 2], плавающего вправо, браузер делает это, но после предоставления [элемента 1] приоритета отображения вправо, поскольку [элемент 1] был первым в вашем HTML.

надеюсь, что это имеет смысл.

0