|
Блоки заполняются в строку с последующим автоматическим переносом (если имеют общие размеры больше предоставленого им контейнера) и имеют равный фиксированый размер каждого блока. Когда все блоки умещаются в одну строку, проблем никаких нет. Но как только общая ширина всех блоков становится больше ширины предоставленой им области (в нашем случае ширины окна браузера), то они переносятся на вторую строку, т.е. ниже. И в большинстве браузеров этот перенос сопровождается растяжением по ширине родительского блока (который тоже inline-block либо float и соответственно должен автоматом подстраиваться под внутренний контент) на всё окно браузера.
Получается по мнению создателей браузеров, перенос строк должен быть обязательно указан в разметке, иначе браузер будет вести себя так, как ему вздумается.
Насчёт прикреплённой картинки - на ней видно, при заполнении в цикле 5-ти блоков, четвёртый блок в экран невместился и соответственно перескочил на строку ниже вместе с пятым. Синий блок при этом никуда не растянулся (он же inline-block / float, всё правильно сделал). На такой идеал наблюдается только в Опере.
Вобщем вывод - без js такого сделать нельзя. Если все согласны с этим, то берусь за js.
Сама первоначальная проблема - выровнять относительно родителя по центру синий блок, а автоматически заполняемый контент, который внутри него, выровнять по левому краю. Этому мешает только одно - растяжение синего блока.
|