Позиционирование элементов

[horprogs]

Привет!

Помогите мне понять почему возникает такая проблема:

 есть три блока, находятся в ряд. Крайние прибиты по краям родителя. При уменьшении экрана 1 блок скрывается, а 3 перестраивается вниз.

Так вот, если играться с размерами окна, 3блок перестраивается вниз, но когда снова увеличиваешь окно, он становится не в ряд, а ниже. Если обновить страницу становится опять все хорошо.

Очень хотелось бы понять почему так.

 

https://jsfiddle.net/horprogs/5hjwwnpj/1/

[Great Rash]

Вы такого там намешали, что браузер с ума сходит.
 
1) Одновременно указывать display: inline-block; и float не имеет никакого смысла, потому что float полюбому делает элемент блочным.
2) Одновременно указывать display: inline-block; и position: absolute; не имеет смысла по тем же причинам.
3) Если у вас абсолютный блок, то для него теряют смысл следующие правила: vertical-align, margin
4) clearfix для этого блока не имеет смысла по тем же причинам, блок .content находится вне потока, поэтому очищать поток не имеет вообще никакого смысла
5) Прыгает у вас всё, потому что для абсолютного блока вы не указали top, поэтому браузер позиционирует элемент там где он был бы, если бы находился в потоке
 
В общем мрак, давно я не видал такого винегрета. Вы походу вообще плохо понимаете CSS. Срочно учиться, читать про такие понятия как layout modes, content model. Гуглить про трёхколоночные макеты и тренироваться в вёрстке макетов с различным количеством колонок - 2, 3, 4 и 5 колонок.

[horprogs]

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

Margin помогает отцентрировать абсолютный блок, так же? 

Подредактировал код, добавил top. Но все равно не то.. Мне уже просто интересно разобраться

 

https://jsfiddle.net/horprogs/5hjwwnpj/4/

 

 

UPD Сделал крайние блоки абсолютными с left 0 и right 0, а серединный блок по центру. Это же нормальное решение?

https://jsfiddle.net/horprogs/5hjwwnpj/6/

Edited November 19, 2015 by horprogs

[Great Rash]

Margin помогает отцентрировать абсолютный блок, так же?

Не всегда, а только если указаны left и right одновременно.

 

Я не знаю, чего вы хотите добиться, но если вы хотите сделать просто 3-х колоночный макет, то абсолют вам совсем не нужен.

1 способ

2 способ

3 способ

[mumus]

А можно ли в данном случае использовать 3 блока с такими свойствами?

display:inline-block;

width:33.3333%;

[Great Rash]

Можно конечно, глявное не забыть избавиться от загадочных отступов.

[horprogs]

Мне кажется в моем случае абсолют подошел неплохо, через inline block и 33.333 мне бы не подошло, т.к. блоки не должны располагаться рядом. Левый должен был прижат к левому, правый к правому края контейнера. А центральный по середине. Ну и на мобильных структура должна меняться. А так сделал, работает, спасибо.

Еще только вопрос: через table-cell получается ячейки заполняют всю строку, несмотря на прописанные в них width?