Почему разваливаются блоки сайта?

Question

[Cepesh16]

Вот сайт: dofalit.url.ph/1%20Family%20tree/family.html
При первом открытии, внизу один блок съезжает.

Однако если тут же перезагрузить страницу, он выстраевается в ряд как задумано.


Объясните почему так, и как с этим бороться?

Answer 1

[Евгений Петров]

Так по горизонтали не растягивают.
Вот так растягивают jsfiddle.net/petroveg/s4rp52me

Так что Chrome поступает так, как и нужно

Comments

[Cepesh16]

Объясните пожалуйста, вот это код из вашего примера:

.wide:after{
content:"";
display:inline-block;
width:100%;
}

Я понимаю, что после каждого item создается пустая строка «content:""», за счет которой и создается пространство между блоками.
Но на сколько я понял, пространств должно быть 3, так как item у нас 3. А на деле их 2, почему не создается еще одно пространство после 3-его блока?

[Евгений Петров]

@Cepesh16 не после элемента, а внутри него последним ребёнком. Вы не ленитесь, прочтите спецификацию-то.

Answer 2

[Sam Stay]

У меня после перезагрузки все так же и осталось. Покажите исходный код.

Comments

[Cepesh16]

rghost.ru/57508679

[Cepesh16]

Данный трюк, наблюдается только в Хроме. Opera, Mozilla, IE отображают правильно.

Answer 3

[Алексей Фищук]

В данном случая, я бы сделал им всем float:left при условии что у них четко обозначена ширина. а под тремя этими дивами добавил бы пустой со стилем clear:both.