Адаптивный div с изображениями ⇐ Html

[Anonymous]

У меня есть 3 изображения в блоке div, расположенном горизонтально. Когда я изменяю размер страницы, изображения меняют свое положение и перемещаются по вертикали. Я хочу, чтобы страница была отзывчивой, и когда я изменяю размер страницы, я хочу, чтобы весь div был адаптирован и изменен в размере. Мне также нужно добавить другие элементы div с другими изображениями. Я хочу, чтобы изображения выравнивались по нижней стороне.
Это пример кода.

Код: Выделить всё

.box{
display: inline-block;
position: relative;
bottom:100%;
width: 100%;
margin: 5% 5% 0 0;
font-size: 12px;
}
.box:before{
content: "";
display: block;
padding-top: 100%;
}
img {
max-width:100%;
height:auto;
border:1px solid black;
text-align:center;
}
.content{
/* Positioning */
position:  absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;

/* Styling */
border:1px solid;
padding: 30px;
text-align: center;
vertical-align: center;
text-transform: uppercase;
color: #fff;
}

Код: Выделить всё

[img]http://fantapr.altervista.org/paul.jpg[/img]
[img]http://fantapr.altervista.org/paul.jpg[/img]
[img]http://fantapr.altervista.org/paul.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/349 ... ith-images