Три изображения по горизонтали с адаптивным дизайном

Question

Мне нужна инструкция о том, как создать простую сетку изображений с изменяемым размером жидкости. Я хотел бы разместить три (около 300 пикселей) квадратных изображения на моей первой странице, которые охватывают ширину и реагируют на изменение размера окна или при просмотре. Если размер экрана меньше, три изображения останутся горизонтальными, но уменьшатся. При просмотре на телефоне три изображения будут складываться так, что первое будет сверху, среднее - одна секунда, а последнее - третье.

Я могу заставить изображения отображаться, но у меня проблемы с CSS.

<div id="content" class="col-full">

 <div id="grid">

    <a href="http://mywebsite.com/info/"><img src="http://lorempixel.com/320/320"></a>
    <a href="http://mywebsite.com/about/"><img src="http://lorempixel.com/320/320"></a>
    <a href="http://mywebsite.com/contact/"><img src="http://lorempixel.com/320/320"></a>

    </div>

<style type="text/css">
#grid img {
float: center;
margin: 25px;
}
</style>

Любой совет ценится для этого NOOB. : -)

Answer 1

Попробуйте "text-align: center;" на контейнере и "display: inline-block;" на изображениях.

Должен сделать вещь.

Пример: http://jsfiddle.net/SvR6Z/1/

РЕДАКТИРОВАТЬ: Добавлены способы уменьшить экран.

Чтобы изменить положение изображений на странице в зависимости от ширины окна, вы можете сделать следующее:

1. Укажите теги с относительными размерами. Например, с "шириной: 80%;" ширина страницы всегда будет составлять 80% от родительского контейнера (если родительский контейнер - это тело, то это будет 80% ширины окна). По умолчанию элемент уровня блока имеет ширину 100%; Если вы не хотите, чтобы оно было больше некоторого значения, вы можете указать для этого свойство max-width. Элемент с: "ширина: 100%; максимальная ширина: 906 пикселей;" всегда будет иметь ширину 960 пикселей или меньше, независимо от размера окна.

2. Если вы хотите лучше контролировать сетку и оформление для мобильных средств просмотра (например, некоторые элементы), вы можете использовать медиа-запросы CSS (подробнее о них см. Здесь: http://css -трюки. com / 6731-css-media-query / ) для этого. Например, если вы связываете css со страницей таким образом, она будет работать только тогда, когда ширина окна больше 701px и меньше 900px:

   <link rel='stylesheet' media='screen
         and (min-width: 701px) 
         and (max-width: 900px)' href='css/medium.css' />