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

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

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



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



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

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9McttrdlgNnjzc2yYLmn1QuxT72HdDNRA0msD4FICLzUS1tQprnLQIRszRyS3MFQ-67NMzmO4wi-BEisBkO3KGKSqd_jX7MCsg8Qik2zBkPk5hvd1Xs4Ca5PN80-wWZtDSQJYymDal2A/s1600/021.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9McttrdlgNnjzc2yYLmn1QuxT72HdDNRA0msD4FICLzUS1tQprnLQIRszRyS3MFQ-67NMzmO4wi-BEisBkO3KGKSqd_jX7MCsg8Qik2zBkPk5hvd1Xs4Ca5PN80-wWZtDSQJYymDal2A/s320/021.JPG" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhznXDpq86fx1A9M9v1Qcbp9qQzAkRE_AF2fA_k1IsLCzU3ODp_z033kGqEfTFcDfkEjj8QtR15iqAZlAKAWqWGPltwfreKjemfUXoEybZVS6gxYFASw2P04Me-2VlbN9bdfx-fph8anZs/s1600/026.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhznXDpq86fx1A9M9v1Qcbp9qQzAkRE_AF2fA_k1IsLCzU3ODp_z033kGqEfTFcDfkEjj8QtR15iqAZlAKAWqWGPltwfreKjemfUXoEybZVS6gxYFASw2P04Me-2VlbN9bdfx-fph8anZs/s320/026.JPG" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLC4Xg63ycChmxDQ_g5zfuK1KyBtqD-WpZO-kRoV1a_VF5snl2LzPLhZk31CeU9wb1MNTTkyrUdFa1SWy98dGhVaJoP8WLvqi3GGvQalW-YstLpt3ZOjEsFts4AbRwO0_Fl6FlAG7a8Aw/s1600/193.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLC4Xg63ycChmxDQ_g5zfuK1KyBtqD-WpZO-kRoV1a_VF5snl2LzPLhZk31CeU9wb1MNTTkyrUdFa1SWy98dGhVaJoP8WLvqi3GGvQalW-YstLpt3ZOjEsFts4AbRwO0_Fl6FlAG7a8Aw/s320/193.JPG" width="320" /></a></div>


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

Получаем

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9McttrdlgNnjzc2yYLmn1QuxT72HdDNRA0msD4FICLzUS1tQprnLQIRszRyS3MFQ-67NMzmO4wi-BEisBkO3KGKSqd_jX7MCsg8Qik2zBkPk5hvd1Xs4Ca5PN80-wWZtDSQJYymDal2A/s1600/021.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9McttrdlgNnjzc2yYLmn1QuxT72HdDNRA0msD4FICLzUS1tQprnLQIRszRyS3MFQ-67NMzmO4wi-BEisBkO3KGKSqd_jX7MCsg8Qik2zBkPk5hvd1Xs4Ca5PN80-wWZtDSQJYymDal2A/s320/021.JPG" width="320" /></a>

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhznXDpq86fx1A9M9v1Qcbp9qQzAkRE_AF2fA_k1IsLCzU3ODp_z033kGqEfTFcDfkEjj8QtR15iqAZlAKAWqWGPltwfreKjemfUXoEybZVS6gxYFASw2P04Me-2VlbN9bdfx-fph8anZs/s1600/026.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhznXDpq86fx1A9M9v1Qcbp9qQzAkRE_AF2fA_k1IsLCzU3ODp_z033kGqEfTFcDfkEjj8QtR15iqAZlAKAWqWGPltwfreKjemfUXoEybZVS6gxYFASw2P04Me-2VlbN9bdfx-fph8anZs/s320/026.JPG" width="320" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLC4Xg63ycChmxDQ_g5zfuK1KyBtqD-WpZO-kRoV1a_VF5snl2LzPLhZk31CeU9wb1MNTTkyrUdFa1SWy98dGhVaJoP8WLvqi3GGvQalW-YstLpt3ZOjEsFts4AbRwO0_Fl6FlAG7a8Aw/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 комментария: