Как разместить картинки рядом?

Вопрос расположения картинок в ряд пока не был актуален для меня, считала это сложным и обходила его стороной. А тут на одном форуме заметила такой вопрос, прочитала ответ. Из комментариев поняла что у задающего вопрос ничего не получилось и решила поэкспериментировать сама.

Код


<div style="float: left;">
<a class="feed-link" href="http://ссылка1"><img alt="123" border="o" src="http://картинка1" title="Рис.1" /></a></div>
<div style="float: left;">
<a class="feed-link" href="http://ссылка2"><img alt="345" border="o" src="http://картинка2" title="Рис.2" /></a></div>
<div style="float: left;">
<a class="feed-link" href="http://ссылка3"><img alt="678" border="o" src="http://картинка3" title="Рис.3" /></a></div>

Код казался понятен.  Вместо выделенного красным и синим вставила код картинки из Пикаса. Посмотрела. Стоят мои картинки как рота солдат на плацу, тесно прижавшись друг к другу. Равнение налево. Меня это совсем не устраивает. Хотелось бы чтобы они стояли на расстоянии вытянутой руки и равнение было по центру. Меня слушаться не хотят. Чуть прикоснулась к ним мышкой, так разбежались в разные стороны как по команде "Вольно". Пробовала менять Left  на center или right - никакого результата. Выстраиваются рядышком, но только по вертикали. Все хотят быть первыми. Долго я их передвигала, это напоминало игру в пятнашки. Результат нулевой. Но все-же я их построила. Не захотели слушать меня, назначим "Лидера". Таким лидером оказалась, как ни банально, картинка под номером один. Поставила ее по центру, благо в Блоггере это не проблема. А последующие номера подводила с правой стороны. Если какая-то картинка задерживалась справа, нажимала на нее и кликала "Выровнять по центру". С тремя картинками проблем особых и не было.

Решила усложнить задачу: поставить 5 картинок, да еще и со ссылками. Как у виджета Linkwithin. Вместо выделенного синим, как и раньше, вставила код подготовленных картинок. А вместо выделенного красным - ссылки на статьи, куда должны вести картинки. Alt и Title тоже прописала. Подправила их мышкой как в предыдущем примере. Результат вполне устраивал.

Все о картинках. Можно почитать.

С этим кодом можно экспериментировать еще и сделать так, чтобы показывались маленькие картинки, а при нажатии - открывались большие.Это вы сделаете и сами, дочитав статью до конца. Возникла одна идея: если я все равно собираю ряд из разбросанных картинок, попробую их вставить в редакторе через кнопку со своего компьютера без всяких кодов. Смотрим что из этого получилось.

Картинки располагаются в одну строку по горизонтали, а которые не помещаются по ширине,  переносятся на следующую. Но подправить их тоже нужно с помощью мышки и только так как я писала, справа налево. 

Раз уж так все легко получилось, попробуем вариант с увеличением картинки. Вставляем из компьютера через редактор подготовленную картинку большого размера. Из визуального редактора переключаемся на вкладку Изменить HTML. Выделяем код своей картинки. Он имеет такой вид:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-
Ycmf7RsKWKM/TnsmbAmJfrI/AAAAAAAABBQ/0NrqIcD5o5M/s1600/Kiev2kk.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaVjEqRjtqJp-MG-UOpq4dplyhgOHeFT6sgz5MxBW7PFM0ECjJ99t9yHr2jTdqoicKT9Ff04ZJxrROPctmqV4LuUo5HPopS28KVc7bbI0F7rtd5RWM8WOFUU6dLKLp36-qeT6aYd1Of-U/s320/Kiev2kk.jpg" width="320" /></a></div>

Выделенное розовым, ссылку -  не трогаем. А вот со второй половиной (голубой) поработаем.  Все изменения производим на вкладке Изменить HTML. Сначала уменьшим размер картинки. Я хочу поставить 3 картинки в ряд. Учитывая ширину поста и зазоры между картинками, решила что примерная ширина картинки должна быть width="160". А чтобы пропорции изображения остались неизменными, высота height="120". Зная исходный размер картинки, посчитать пропорции несложно или загляните в редактор, где обрабатываете свои изображения. Ну и чтоб уж было все по-правилам, вставляем Alt и Title.  Подправленный код будет выглядеть так:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaVjEqRjtqJp-MG-UOpq4dplyhgOHeFT6sgz5MxBW7PFM0ECjJ99t9yHr2jTdqoicKT9Ff04ZJxrROPctmqV4LuUo5HPopS28KVc7bbI0F7rtd5RWM8WOFUU6dLKLp36-qeT6aYd1Of-U/s1600/Kiev2kk.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img  alt="Киев" border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaVjEqRjtqJp-MG-UOpq4dplyhgOHeFT6sgz5MxBW7PFM0ECjJ99t9yHr2jTdqoicKT9Ff04ZJxrROPctmqV4LuUo5HPopS28KVc7bbI0F7rtd5RWM8WOFUU6dLKLp36-qeT6aYd1Of-U/s320/Kiev2kk.jpg" width="160"  title="Как разместить картинки рядом"/></a></div>

Аналогичным образом подправила код двух других картинок и поняла что уже чему-то научилась. Попробуйте кликнуть.

Для полного завершения мне не хватало рамок. Я их, изрядно помучившись, перебрав известные мне варианты, все-же соорудила и была довольна. Описывать не буду, это громоздко. Зато после всех моих мучений нашла элегантный выход. Сейчас попробуем им воспользоваться.

<style type="text/css">
   .thumb img {
    border: 2px solid #55c5e9; /* Рамка вокруг фотографии */
    padding: 5px; /* Расстояние от картинки до рамки */
    background: #666; /* Цвет фона */
    margin-right: 10px; /* Отступ справа */
    margin-bottom: 10px; /* Отступ снизу */
   }
  </style>
<div class="thumb">

Данную шапочку, отвечающую за добавление рамки и цветной области вокруг  картинок, добавим перед кодом, с которого начиналась статья.

<style type="text/css">
   .thumb img {
    border: 2px solid #55c5e9; /* Рамка вокруг фотографии */
    padding: 5px; /* Расстояние от картинки до рамки */
    background: #666; /* Цвет фона */
    margin-right: 10px; /* Отступ справа */
    margin-bottom: 10px; /* Отступ снизу */
   }
  </style> 
<div class="thumb">




<div style="float: left;">
<a class="feed-link" href="http://ссылка1"><img alt="123" border="o" src="http://картинка1" title="Рис.1" /></a></div>
<div style="float: left;">
<a class="feed-link" href="http://ссылка2"><img alt="345" border="o" src="http://картинка2" title="Рис.2" /></a></div>
<div style="float: left;">
<a class="feed-link" href="http://ссылка3"><img alt="678" border="o" src="http://картинка3" title="Рис.3" /></a></div>

Так стали выглядеть наши человечки.

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

Приглашаю Вас присоединиться ко мне в следующих сервисах:

Чтобы автоматически узнавать об обновлениях блога, подпишитесь на  RSS-канал