HTML код размещения изображений в строку по горизонтали

При встраивании 2-х фотографий подряд в статью, они располагаются одна под одной, если их размер не ужат. Что делать, если изображений более 2-х и есть необходимость сохранять первоначальный размер картинки? Спасибо тем, кто поделился HTML кодом для вставок изображений в одну строку.

Код размещения изображений Примеры

HTML код размещения изображений в строку по горизонтали

Форматирование нескольких изображений при размещении картинок (фотографий) рядом по горизонтали. Если в ширину окна все не вмещаются, то переносятся в следующую строку. Пробел между фотографиями, появляется из-за тега <img>. Чтобы убрать пустой промежуток напишите теги <img>  в одну строку. Для регулирования горизонтальных и вертикальных отступов примените стилевое свойство margin-right и margin-bottom

  • <!DOCTYPE html>
  •      <html>
  •         <head>
  •              <meta charset=«utf-8»>
  •                <title>Фотографии</title>
  •                  </head>
  •                     <body>
  •                       <p>
  • <img src=«images/thumb1.jpg» alt=«Фотография 1» width=«120» height=«120»><img src=«images/thumb2.jpg» alt=«Фотография 2» width=«120» height=«120»><img src=«images/thumb3.jpg» alt=«Фотография 3» width=«120» height=«120»><img src=«images/thumb4.jpg» alt=«Фотография 4» width=«120» height=«120»>
  •       </p>
  •     </body>
  • </html>

Пример 2  К изображениям добавляется рамка (цветная область вокруг фото)

HTML код размещения изображений в строку по горизонтали

  • <!DOCTYPE html>
  •  <html>
  •   <head>
  •    <meta charset=«utf-8»>
  •     <title>Фотографии</title>
  •     <style>
  • .thumb img {
  • border: 2px solid #55c5e9; /* Рамка вокруг фотографии */
  • padding: 15px; /* Расстояние от картинки до рамки */
  • background: #666; /* Цвет фона */
  • margin-right: 10px; /* Отступ справа */
  • margin-bottom: 10px; /* Отступ снизу */ }
  •     </style>
  •    </head>
  •   <body>
  • <p class=«thumb»>
  • <img src=«images/thumb1.jpg» alt=«Фотография 1» width=«120» height=«120»><img src=«images/thumb2.jpg» alt=«Фотография 2» width=«120» height=«120»><img src=«images/thumb3.jpg» alt=«Фотография 3» width=«120» height=«120»><img src=«images/thumb4.jpg» alt=«Фотография 4» width=«120» height=«120»>
  •    </p>
  •   </body>
  • </html>

s1mple, , по-простому, вставляйте каждую картинку с ссылкой в новую <td>(ячейку относятся к одному <tr> (ряду). Все изображения в одну строку (для экономии места)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
 <tr>
  <td>
   <img src="ффф.jpg" height="150" width="200"><a href="ggg.html">Увеличить</br></a>
  </td>
  <td>
   <img src="чукч2.jpg" height="150" width="200"><a href="чукча.html">Увеличить</br></a>
  </td>
  <td><!-- Новая картинка--></td>
  <td><!-- еще картинка с сылкой--></td>
  <td><!-- и так далее.....--></td>
 </tr>
</table>

Можно вписать это в один тэг и не прописывать каждый раз! Создаете файл с табицей каскадных стилей (CSS). В ней укажите все параметры объектов — блоков, таблиц, текста.
1) выдумываете любое имя блока, напр., pic_1;
2) в CSS пишете:

Забиваем Сайты В ТОП КУВАЛДОЙ - Уникальные возможности от SeoHammer
Каждая ссылка анализируется по трем пакетам оценки: SEO, Трафик и SMM. SeoHammer делает продвижение сайта прозрачным и простым занятием. Ссылки, вечные ссылки, статьи, упоминания, пресс-релизы - используйте по максимуму потенциал SeoHammer для продвижения вашего сайта.
Что умеет делать SeoHammer
— Продвижение в один клик, интеллектуальный подбор запросов, покупка самых лучших ссылок с высокой степенью качества у лучших бирж ссылок.
— Регулярная проверка качества ссылок по более чем 100 показателям и ежедневный пересчет показателей качества проекта.
— Все известные форматы ссылок: арендные ссылки, вечные ссылки, публикации (упоминания, мнения, отзывы, статьи, пресс-релизы).
— SeoHammer покажет, где рост или падение, а также запросы, на которые нужно обратить внимание.
SeoHammer еще предоставляет технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней.
Зарегистрироваться и Начать продвижение
1
2
3
4
5
6
7
[COLOR="Magenta"]#pic_1 {[/COLOR]
        [COLOR="Navy"]width[/COLOR][COLOR="#ff00ff"]:[/COLOR] [COLOR="Blue"]160px[COLOR="#ff00ff"];[/COLOR][/COLOR]        /*ширина блока*/
        [COLOR="#000080"]height[/COLOR][COLOR="#ff00ff"]:[/COLOR] [COLOR="#0000ff"]128px[/COLOR][COLOR="#ff00ff"];[/COLOR]       /*высота блока*/
        [COLOR="#000080"]float[/COLOR][COLOR="#ff00ff"]:[/COLOR] [COLOR="#0000ff"]left[/COLOR][COLOR="#ff00ff"];[/COLOR]             /*обтекание*/
        [COLOR="#000080"]padding-right[/COLOR][COLOR="#ff00ff"]:[/COLOR] [COLOR="#0000ff"]2px[/COLOR][COLOR="#ff00ff"];[/COLOR] /*отступ справа*/
        [COLOR="#000080"]text-align[/COLOR][COLOR="#ff00ff"]:[/COLOR] [COLOR="#0000ff"]center[/COLOR][COLOR="#ff00ff"];[/COLOR]  /*выравнивание текста по центру*/
[COLOR="Magenta"]}[/COLOR]

3) затем в файле указываете: <div id=»pic_1«></div>
4) теперь блок с идентификатором pic_1 принял все свойства, указанные выше.

Должны изображения выстроиться в одну строку с определёнными параметрами . Код размещения изображений — кто какие знает ещё?

Бесплатные фотостоки и фотобанки. Или где скачать фотографии бесплатно…

Как проверить картинку на уникальность?

Как вставить картинку на сайт