Как разместить несколько картинок рядом по горизонтали - «Изображения» » Самоучитель CSS
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
  • 21 октября 2025, 18:27
Как выбрать между 1С:ERP Управление холдингом и 1С:Управление холдингом 8?
Популярные статьи
  • 28 октября 2025, 10:30
Инсайдер раскрыл главную игру ноябрьской подборки PS Plus до официального анонса - «Новости сети»
Наш опрос
Помогли мы вам



Наши новости
      
      
  • 24 марта 2016, 17:40
Написание эффективного кода
  • 24 марта 2016, 16:20
Базовый синтаксис CSS
Разное и интересное
  • 21 октября 2025, 18:27
Как выбрать между 1С:ERP Управление холдингом и 1С:Управление холдингом 8?
  • 02 мая 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
25-03-2016, 10:14
Как разместить несколько картинок рядом по горизонтали - «Изображения»
Рейтинг:
Категория: Самоучитель CSS / Изображения
Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

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

Решение

Изображения являются строчными элементами, поэтому написание в коде подряд несколько тегов <thumb> автоматически выстроит картинки по горизонтали. Тем не менее, с помощью стилей этим построением можно управлять более изящно.

Для начала рассмотрим простой пример, когда изображения выстраиваются по горизонтали без стилевого оформления (пример 1).

Пример 1. Картинки по горизонтали

HTML5IECrOpSaFx

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

Результат данного примера показан на рис. 1. Изображения выстраиваются в одну строку по горизонтали, а если некоторые из них не помещаются по ширине в окне, то переносятся на следующую строку.

 


Рис. 1. Фотографии, расположенные по горизонтали

Обратите внимание на пробел между фотографиями, он появляется за счет переноса тега <thumb> в коде на новую строку. Чтобы убрать пустой промежуток достаточно написать теги <thumb> в примере в одну строку.

Для регулирования горизонтальных и вертикальных отступов между фотографиями применяется стилевое свойство margin-right и margin-bottom. В примере 2 кроме отступов к фотографиям также добавлена рамка и цветная область вокруг изображений.

Пример 2. Отступы у фотографий

HTML5CSS 2.1IECrOpSaFx

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

Результат данного примера показан на рис. 2.

 


Рис. 2. Вид фотографий, оформленных с помощью стилей

Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

Internet Explorer Chrome Opera Safari Firefox Android iOS 4.0 1.0 4.0 1.0 1.0 1.0 1.0 Задача Добавить на страницу несколько изображений, чтобы они располагались рядом с друг другом по горизонтали. Решение Изображения являются строчными элементами, поэтому написание в коде подряд несколько тегов автоматически выстроит картинки по горизонтали. Тем не менее, с помощью стилей этим построением можно управлять более изящно. Для начала рассмотрим простой пример, когда изображения выстраиваются по горизонтали без стилевого оформления (пример 1). Пример 1. Картинки по горизонтали HTML5 IE Cr Op Sa Fx Результат данного примера показан на рис. 1. Изображения выстраиваются в одну строку по горизонтали, а если некоторые из них не помещаются по ширине в окне, то переносятся на следующую строку. Рис. 1. Фотографии, расположенные по горизонтали Обратите внимание на пробел между фотографиями, он появляется за счет переноса тега в коде на новую строку. Чтобы убрать пустой промежуток достаточно написать теги в примере в одну строку. Для регулирования горизонтальных и вертикальных отступов между фотографиями применяется стилевое свойство margin-right и margin-bottom. В примере 2 кроме отступов к фотографиям также добавлена рамка и цветная область вокруг изображений. Пример 2. Отступы у фотографий HTML5 CSS 2.1 IE Cr Op Sa Fx Результат данного примера показан на рис. 2. Рис. 2. Вид фотографий, оформленных с помощью стилей
Просмотров: 11 248
Комментариев: 0:   25-03-2016, 10:14
Распечатать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:


Другие новости по теме:
ДОБАВИТЬ БАННЕР