Как исправить размещение картинок в блоке?

Question

[Alexeii Kozachuk]

Всем привет , всё никак не могу понять почему картинки во втором блоке сползают вниз , подскажите как правильно исправить ? Ещё вопрос по поводу бекграунда , не получается разместить полностью картинку в этот блок , получается либо слишком растянутой , либо кривой . Прошу прощения за наглость , вопрос по поводу футера , так же не получается растянуть его на ширину всей страницы , заранее благодарен за помощь ,)

Вот собственно ссылка : alexeiikozachuk.github.io

Answer 1

[Капитан Какао]

У вас изначально структура вёрстки не правильная, от туда и все эти проблемы.
Можно конечно сделать костыли, что бы всё это исправить, но я бы вам советовал поучится правильной вёрстке.

1) Блокам не нужно задавать pisition:absolute. Просто float:left, что бы они обтикали друг друга, и overflow:hidden, что бы всё в нутри блока обрезалось и не вылазило на область блока.

2) Что бы залить блок картинкой полностью, используйте background-size:cover

3) Что бы рястянуть футер на всю ширину, изначально нужно было делать обёртку wrapper не общую для всего сайта, а для каждого блока (шапка, контент,футер)
jsfiddle.net/r6h3j641

Comments

[Alexeii Kozachuk]

ой , спасибо огромнейшее ) с бекграундом пробовал задавать это значение , всё равно не вышло ничего

[Капитан Какао]

Alexeii Kozachuk: в зависимости от ширины области, количество картинок в ряд будет меняться. Чем шире область, тем больше картинок в ряд.
jsfiddle.net/3uzjsns2

[Капитан Какао]

Код тот же, но область примера шире, по этому и картинок в ряд больше
jsfiddle.net/3uzjsns2/1

[Alexeii Kozachuk]

т.е. с футером ничего не получиться сделать ? за блоки спасибо большое , исправил расположение картинок )

[Капитан Какао]

Alexeii Kozachuk: я же показал пример как поступить с футером.
Для каждого блока создать свою оболочку.
Вот в примере футер на всю ширину.
jsfiddle.net/r6h3j641

[Alexeii Kozachuk]

спасибо, спасибо, спасибо тебе добрый человек , выручил очень ,)

[Капитан Какао]

Alexeii Kozachuk: ;)