Размещения  изображений рядом по горизонтали

Иногда требуется разместить несколько изображений рядом по горизонтали на странице или скажем на боковом сайдбаре.

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

Прописываем этот код в режиме HTML и приятно наблюдаем за полученным результатом.

<p>

<img src=»ссылка на изображение» />

<img src=»ссылка на изображение» />

</p>

Здесь важно обратить особое внимание на пробелы между изображениями. В данном случае пробелы создается также автоматически за счет того, что мы прописываем теги <IMG> с новой строки, поэтому получается расстояние виде пробела между картинками.

Если прописывать теги <IMG> не с новой строки то картинки могут стать в стык друг к другу и прилипнуть. Также можно увеличить данный пробел с вставлением специальных HTML кодов (специальных набор символов) для образования большего пробела:в виде: &quot;

Данный прием можно применить также для квадратных рекламных баннеров которые вставляется в виде виджета на боковом сайдбаре сайта. Например я применил этот прием на своем сайте в сайдбаре в этом сайте на котором вы сейчас находитесь.

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