джерело http://veraborok.blogspot.com
Вопрос расположения картинок в ряд пока не был актуален для меня, считала это сложным и обходила его стороной. А тут на одном форуме заметила такой вопрос, прочитала ответ. Из комментариев поняла что у задающего вопрос ничего не получилось и решила поэкспериментировать сама.
Код
<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>
<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/AVvXsEhOu6pUfzQqw9vZKLUCen4vpJx39EbsFfy1oem2ivc_w-JLYBPocVn1RWBRLM5Lw3m80VlRnOIf48FIrAGVL_WcGAj0Tu9uSWcsPc0n0WDRw1Nb1BVYm4RTfUxAlUmhtRNdeKJegVyehUM/s320/Kiev2kk.jpg" width="320" /></a></div>
<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/AVvXsEhOu6pUfzQqw9vZKLUCen4vpJx39EbsFfy1oem2ivc_w-JLYBPocVn1RWBRLM5Lw3m80VlRnOIf48FIrAGVL_WcGAj0Tu9uSWcsPc0n0WDRw1Nb1BVYm4RTfUxAlUmhtRNdeKJegVyehUM/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/AVvXsEhOu6pUfzQqw9vZKLUCen4vpJx39EbsFfy1oem2ivc_w-JLYBPocVn1RWBRLM5Lw3m80VlRnOIf48FIrAGVL_WcGAj0Tu9uSWcsPc0n0WDRw1Nb1BVYm4RTfUxAlUmhtRNdeKJegVyehUM/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/AVvXsEhOu6pUfzQqw9vZKLUCen4vpJx39EbsFfy1oem2ivc_w-JLYBPocVn1RWBRLM5Lw3m80VlRnOIf48FIrAGVL_WcGAj0Tu9uSWcsPc0n0WDRw1Nb1BVYm4RTfUxAlUmhtRNdeKJegVyehUM/s320/Kiev2kk.jpg" width="160" title="Как разместить картинки рядом"/></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOu6pUfzQqw9vZKLUCen4vpJx39EbsFfy1oem2ivc_w-JLYBPocVn1RWBRLM5Lw3m80VlRnOIf48FIrAGVL_WcGAj0Tu9uSWcsPc0n0WDRw1Nb1BVYm4RTfUxAlUmhtRNdeKJegVyehUM/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/AVvXsEhOu6pUfzQqw9vZKLUCen4vpJx39EbsFfy1oem2ivc_w-JLYBPocVn1RWBRLM5Lw3m80VlRnOIf48FIrAGVL_WcGAj0Tu9uSWcsPc0n0WDRw1Nb1BVYm4RTfUxAlUmhtRNdeKJegVyehUM/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">
.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>
Так стали выглядеть наши человечки.
Добавить рамочку можно и к картинкам с мышатами, вставляемыми через кнопку в редакторе.
