Иногда требуется разместить несколько изображений рядом по горизонтали на странице или скажем на боковом сайдбаре.
В принципе здесь нет ничего сложного, из-за того, что изображения являются строчными элементами. Следовательно, если указывать несколько коды подряд тегов <IMG>, то картинки будут автоматически встраиваться рядом по горизонтали друг с другом. В том случае когда какая-то во время публикации на сайте картинка не будет помещаться по ширине заданного окна то она будет переноситься на очередную строку. Посмотрим данную задачу на примере двух картин с моего сайта:
Прописываем этот код в режиме HTML и приятно наблюдаем за полученным результатом.
<p>
<img src=»ссылка на изображение» />
<img src=»ссылка на изображение» />
</p>
Здесь важно обратить особое внимание на пробелы между изображениями. В данном случае пробелы создается также автоматически за счет того, что мы прописываем теги <IMG> с новой строки, поэтому получается расстояние виде пробела между картинками.
Если прописывать теги <IMG> не с новой строки то картинки могут стать в стык друг к другу и прилипнуть. Также можно увеличить данный пробел с вставлением специальных HTML кодов (специальных набор символов) для образования большего пробела:в виде: "
Данный прием можно применить также для квадратных рекламных баннеров которые вставляется в виде виджета на боковом сайдбаре сайта. Например я применил этот прием на своем сайте в сайдбаре в этом сайте на котором вы сейчас находитесь.
Только важно отметить, что данная инструкция подходит только для работы на сайте с классическим редактором. А когда используются новый редактор с блоками то лучше применить подобные публикации с помощью блока «Галерея» Выбрав режим Галерея можно разместить картинки рядом сколько хотите и как хотите.