Картинки рядом, две и более по горизонтали.

Как и обещала, сегодня расскажу о втором способе: картинок вместе.

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

Они будут стоять вот так:: 

 

<br />

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

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMMQR2GzWDllSyTDxRSbaO6Obpcyn2k3Egik9n23vd4T6srOR4D101ibWe6an1X5tdq_52WYO_z5266ieOwwE7ckUqukzSZGGtUyKH9LDW2-kLFJMAmE9Hm3GVZmJaYVLXFQOhFaNbouCT/s1600/fotosbornik_ru_1675.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMMQR2GzWDllSyTDxRSbaO6Obpcyn2k3Egik9n23vd4T6srOR4D101ibWe6an1X5tdq_52WYO_z5266ieOwwE7ckUqukzSZGGtUyKH9LDW2-kLFJMAmE9Hm3GVZmJaYVLXFQOhFaNbouCT/s320/fotosbornik_ru_1675.jpg" width="320" /></a></div>

<br />

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

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiISxsqwv_cG0zFsH2jDTuth-Niq7t50MbbLAK1LTuWppe-AvOlnSWfznMOvpy6ArnXFl3PY9RwV44l34UmAO7BfTtDnyuoT73bb68cAKqJzLUG4OpMgUWrAxbPO2FnDyfQo88sELfooFw4/s1600/fotosbornik_ru_1675.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiISxsqwv_cG0zFsH2jDTuth-Niq7t50MbbLAK1LTuWppe-AvOlnSWfznMOvpy6ArnXFl3PY9RwV44l34UmAO7BfTtDnyuoT73bb68cAKqJzLUG4OpMgUWrAxbPO2FnDyfQo88sELfooFw4/s320/fotosbornik_ru_1675.jpg" width="320" /></a></div>

<br />

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

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCHYDurwORaoo1tm3Wm34mcB1HvSdoOvyxdvHhiVcxKd_LMCbK3jiEd37fe5LKyajTZHFvhKB33mH0QXYu15WZHBJkyrIq_kuXQpbQ0JNGhGQorJVf97Vcc6y2_QQ5RTI-w87uXMRptKfL/s1600/fotosbornik_ru_1675.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCHYDurwORaoo1tm3Wm34mcB1HvSdoOvyxdvHhiVcxKd_LMCbK3jiEd37fe5LKyajTZHFvhKB33mH0QXYu15WZHBJkyrIq_kuXQpbQ0JNGhGQorJVf97Vcc6y2_QQ5RTI-w87uXMRptKfL/s320/fotosbornik_ru_1675.jpg" width="320" /></a></div>

<br />

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

<br /></div>

<br />

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

<br /></div>

</div>

После изменений код стал иметь вот такой вид:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMMQR2GzWDllSyTDxRSbaO6Obpcyn2k3Egik9n23vd4T6srOR4D101ibWe6an1X5tdq_52WYO_z5266ieOwwE7ckUqukzSZGGtUyKH9LDW2-kLFJMAmE9Hm3GVZmJaYVLXFQOhFaNbouCT/s1600/fotosbornik_ru_1675.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMMQR2GzWDllSyTDxRSbaO6Obpcyn2k3Egik9n23vd4T6srOR4D101ibWe6an1X5tdq_52WYO_z5266ieOwwE7ckUqukzSZGGtUyKH9LDW2-kLFJMAmE9Hm3GVZmJaYVLXFQOhFaNbouCT/s320/fotosbornik_ru_1675.jpg" width="100" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiISxsqwv_cG0zFsH2jDTuth-Niq7t50MbbLAK1LTuWppe-AvOlnSWfznMOvpy6ArnXFl3PY9RwV44l34UmAO7BfTtDnyuoT73bb68cAKqJzLUG4OpMgUWrAxbPO2FnDyfQo88sELfooFw4/s1600/fotosbornik_ru_1675.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiISxsqwv_cG0zFsH2jDTuth-Niq7t50MbbLAK1LTuWppe-AvOlnSWfznMOvpy6ArnXFl3PY9RwV44l34UmAO7BfTtDnyuoT73bb68cAKqJzLUG4OpMgUWrAxbPO2FnDyfQo88sELfooFw4/s320/fotosbornik_ru_1675.jpg" width="100" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCHYDurwORaoo1tm3Wm34mcB1HvSdoOvyxdvHhiVcxKd_LMCbK3jiEd37fe5LKyajTZHFvhKB33mH0QXYu15WZHBJkyrIq_kuXQpbQ0JNGhGQorJVf97Vcc6y2_QQ5RTI-w87uXMRptKfL/s1600/fotosbornik_ru_1675.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCHYDurwORaoo1tm3Wm34mcB1HvSdoOvyxdvHhiVcxKd_LMCbK3jiEd37fe5LKyajTZHFvhKB33mH0QXYu15WZHBJkyrIq_kuXQpbQ0JNGhGQorJVf97Vcc6y2_QQ5RTI-w87uXMRptKfL/s320/fotosbornik_ru_1675.jpg" width="100" /></a>

И так что я сделала я удалила как и в соседней статье весь этот код:

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

а теперь самое трудоемкое, нужно в ручную изменить размеры картинки:
изменить ширину width="320" и высоту height="318"
Размеры моих картинок более или мене квадрантные поэтому я  их изменила до 100, если у вас картинки прямоугольной формы вам нужно будет, подбирать размер самим.
Этот код я увидела тут