Блоки div выходят за рамки родителя

Всем привет. Как сделать, чтобы блоки не выходили за границы родителя. У родителя установлено свойство height, но блоки все равно уползают за границы. Они должны идти друг за другом, но не под другом. Под каждой картинкой мне нужно вывести информацию, поэтому каждое изображение поместил в отдельный div. Вот ссылка на мою проблему: http://jsfiddle.net/kkn8r/
0
css html верстка

1 ответов

Главная ваша проблема кроется в явном непонимании концепции блоков и инлайн-элементов.
Когда вы помещаете img в div, это блочное поведение. Блоки не компонируются по горизонтали, а размещаются вертикально.

Выходов несколько:
а) убрать блочное поведение div слоев: http://jsfiddle.net/2gYSZ/
Как вариант - использовать display: inline-block, там есть свои тонкости, почитайте здесь: http://htmlbook.ru/css/display
б) убрать div вообще, тогда картинки будут нормально размещаться: http://jsfiddle.net/Eaueu/
в) если нужно, чтобы текст, который переходит за границы исчезал или появлялась линейка- установите в div#one{ overflow: hidden; } (это спрячет то, что вылазит, но не совсем вам подойдет) или overflow: scroll (появится вертикальное прокручивание).

Как мне кажется, вам подойдет первый вариант.

http://webdevelopernotes.ru/2011/09/05/display-inline-block/ - вот еще нашел неплохую статью на подобную тему.

2