воскресенье, 24 февраля 2013 г.

Как сделать картинки в ряд?

Этим вопросом я озадачилась с самого первого поста. Сегодня я нашла  оптимальный для меня  вариант.
Загружаем фотографии обычным способом с компьютера. Для примера я загружу три фотографии. Идем в режим HTML.



Видим такой код



<div class="separator" style="clear: both; text-align: center;">

<a href="http://4.bp.blogspot.com/-RbJ6T1EEouo/USpeHVkg82I/AAAAAAAAAQo/oqK7XIZ5pWQ/s1600/021.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="http://4.bp.blogspot.com/-RbJ6T1EEouo/USpeHVkg82I/AAAAAAAAAQo/oqK7XIZ5pWQ/s320/021.JPG" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-ygnYx4dHMz0/USpeHjW6I6I/AAAAAAAAAQs/FOEoyPqMNXE/s1600/026.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="http://3.bp.blogspot.com/-ygnYx4dHMz0/USpeHjW6I6I/AAAAAAAAAQs/FOEoyPqMNXE/s320/026.JPG" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-frDqdmlyymI/USpeIAInzzI/AAAAAAAAAQ0/jHFMIz6oos4/s1600/193.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="http://1.bp.blogspot.com/-frDqdmlyymI/USpeIAInzzI/AAAAAAAAAQ0/jHFMIz6oos4/s320/193.JPG" width="320" /></a></div>


Удаляем все, что выделено голубым, т.е. все что находиться в к контейнере <div></div>, и тег перевода строки <br />. 

Получаем

<a href="http://4.bp.blogspot.com/-RbJ6T1EEouo/USpeHVkg82I/AAAAAAAAAQo/oqK7XIZ5pWQ/s1600/021.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="http://4.bp.blogspot.com/-RbJ6T1EEouo/USpeHVkg82I/AAAAAAAAAQo/oqK7XIZ5pWQ/s320/021.JPG" width="320" /></a>

<a href="http://3.bp.blogspot.com/-ygnYx4dHMz0/USpeHjW6I6I/AAAAAAAAAQs/FOEoyPqMNXE/s1600/026.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="http://3.bp.blogspot.com/-ygnYx4dHMz0/USpeHjW6I6I/AAAAAAAAAQs/FOEoyPqMNXE/s320/026.JPG" width="320" /></a>
<a href="http://1.bp.blogspot.com/-frDqdmlyymI/USpeIAInzzI/AAAAAAAAAQ0/jHFMIz6oos4/s1600/193.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="http://1.bp.blogspot.com/-frDmlyymI/USpeIAInzzI/AAAAAAAAAQ0/jHFMIz6oos4/s320/193.JPG" width="320" /></a>

Но  картинки все равно не встали в ряд. Это из-за того, что они слишком большие.  Можно уменьшить оба размера высоту и ширину, составив пропорцию, но  это долго. Проще  удалить один из параметров например высоту (выделено желтым),  и изменять только ширину картинки (выделено голубым), подгоняя нужный размер. В данном случае ширина 170 px.






Можно сделать картинку ссылкой. Для этого нужную ссылку вставляем  в кавычки вместо текста выделенного розовым.






2 комментария: