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

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

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

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

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

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

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

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

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

Новости

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

Справочник CSS

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

Афоризмы

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

Видео Уроки


Видео уроки
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
Популярные статьи
  • 26 март 2025, 00:03
NVIDIA анонсировала ИИ-модели Llama Nemotron с регулируемым «уровнем интеллекта» / ServerNews - «Новости сети»
Наш опрос
Помогли мы вам



Наши новости
       005f1294
  • 24 март 2016, 17:40
Написание эффективного кода
  • 24 март 2016, 16:20
Базовый синтаксис CSS
Разное и интересное
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
  • 25 апрель 2024, 01:19
Скачать приложение Betera на Android
25-03-2016, 10:17
Разместить слитно два изображения друг под другом - «Изображения»
Рейтинг:
Категория: Самоучитель CSS / Изображения
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

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

Решение

Расположение изображений друг под другом часто продиктовано требованиями дизайна, когда необходимо «склеить» без швов несколько изображений в одну цельную картину. Обычно для переноса текста, а также изображений на другую строку применяется тег <br> или контейнер фиксированного размера, но в том и другом случае существуют свои особенности.

Для начала рассмотрим способ применения тега <br>, который отвечает за создание переноса. Этот тег достаточно добавить сразу же после первого тега <thumb>, как показано в примере 1. Здесь, однако, кроется одна хитрость. При строгом режиме браузера (в HTML5 или при строгом <!DOCTYPE> в HTML4 или XHTML) между изображений возникает пустой промежуток, убрать который поможет свойство line-height, его следует указать для контейнера, в котором хранятся изображения, обычно это тег <p> или <div>.

Пример 1. Использование тега <br>

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения по вертикали</title>
  <style>
   .thumb {
    line-height: 1px; /* Межстрочное расстояние */
   }
  </style>
 </head>
 <body>
  <p class="thumb"><thumb src="images/ecctitle.png" alt="Название"
   width="640" height="158"><br>
  <thumb src="images/navigate.png" alt="Навигация" width="640" height="30"></p>
 </body>
</html>

Результат данного примера показан на рис. 1. Изображения располагаются внутри контейнера <p> и разделяются тегом <br>. Для состыковки изображений без пробелов в стилях указывается свойство line-height со значением 1px. Те же рисунки без состыковки показаны на рис. 2.

 


Рис. 1. Два изображения, состыкованные по вертикали

 


Рис. 2. Промежуток между изображениями

Кроме использования межстрочного расстояния, существуют и другие методы убрать промежуток между рисунками, например, использовать свойство vertical-align.

.thumb thumb {
  vertical-align: middle;
}

Можно обойтись и без тега <br>, поместив изображения в блок фиксированной ширины, значение которой совпадает с шириной рисунков. Перенос изображений друг под друга произойдет автоматически (пример 2).

Пример 2. Фиксированная ширина

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения по вертикали</title>
  <style>
   .center {
    margin: 0 auto; /* Выравнивание блока по центру */
    width: 640px; /* Ширина блока */
    line-height: 1px; /* Межстрочное расстояние */
   }
  </style>
 </head>
 <body>
  <div class="center">
   <thumb src="images/ecctitle.png" alt="Название" width="640" height="158">
   <thumb src="images/navigate.png" alt="Навигация" width="640" height="30">
  </div>
 </body>
</html>

В браузере Internet Explorer 6 и 7 в результате выполнения данного примера возможно появление промежутка между изображениями. Известная ошибка этого браузера решается просто. Достаточно теги <thumb> в коде примера записать в одну строку без пробелов и переносов.

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

Internet Explorer Chrome Opera Safari Firefox Android iOS 6.0 8.0 1.0 4.0 1.0 1.0 1.0 1.0 Задача Добавить на страницу несколько изображений, чтобы они располагались рядом с друг другом по вертикали без зазоров. Решение Расположение изображений друг под другом часто продиктовано требованиями дизайна, когда необходимо «склеить» без швов несколько изображений в одну цельную картину. Обычно для переноса текста, а также изображений на другую строку применяется тег или контейнер фиксированного размера, но в том и другом случае существуют свои особенности. Для начала рассмотрим способ применения тега , который отвечает за создание переноса. Этот тег достаточно добавить сразу же после первого тега , как показано в примере 1. Здесь, однако, кроется одна хитрость. При строгом режиме браузера (в HTML5 или при строгом в HTML4 или XHTML) между изображений возникает пустой промежуток, убрать который поможет свойство line-height, его следует указать для контейнера, в котором хранятся изображения, обычно это тег или . Пример 1. Использование тега HTML5 CSS 2.1 IE Cr Op Sa Fx Результат данного примера показан на рис. 1. Изображения располагаются внутри контейнера и разделяются тегом . Для состыковки изображений без пробелов в стилях указывается свойство line-height со значением 1px. Те же рисунки без состыковки показаны на рис. 2. Рис. 1. Два изображения, состыкованные по вертикали Рис. 2. Промежуток между изображениями Кроме использования межстрочного расстояния, существуют и другие методы убрать промежуток между рисунками, например, использовать свойство vertical-align. Можно обойтись и без тега , поместив изображения в блок фиксированной ширины, значение которой совпадает с шириной рисунков. Перенос изображений друг под друга произойдет автоматически (пример 2). Пример 2. Фиксированная ширина HTML5 CSS 2.1 IE Cr Op Sa Fx В браузере Internet Explorer 6 и 7 в результате выполнения данного примера возможно появление промежутка между изображениями. Известная ошибка этого браузера решается просто. Достаточно теги в коде примера записать в одну строку без пробелов и переносов.
Просмотров: 6 293
Комментариев: 0:   25-03-2016, 10:17
Распечатать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

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


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