Как сделать картинки друг под другом в html
Перейти к содержимому

Как сделать картинки друг под другом в html

  • автор:

Как разместить несколько картинок рядом по горизонтали?

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

Решение

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

Для начала рассмотрим простой пример, когда изображения выстраиваются по горизонтали без стилевого оформления (пример 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. Вид фотографий, оформленных с помощью стилей

Как разместить слитно два изображения друг под другом?

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

Решение

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

Для начала рассмотрим способ применения тега
, который отвечает за создание переноса. Этот тег достаточно добавить сразу же после первого тега , как показано в примере 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 .

.img img

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Изображения по вертикали    
Навигация

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

Картинки друг под другом

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

Связи

Разделы сайта

Популярное

  • Уроки по HTML и CSS
  • HTML5 и CSS3 на примерах
  • Руководство по флексбоксам
  • Руководство по JSON
  • Как верстать на HTML5 и CSS3
  • Продвинутые уроки по HTML и CSS
  • Визуальное руководство по свойствам flexbox
  • Создание первого приложения на Node

Помощь по сайту

Сайт WebReference.ru использует VPS от компании Beget.

Как разместить две картинки друг от друга?

введите сюда описание изображения

Не могу разместить картинки друг от друга как на фото Пока вышло только так: HTML

 
#header < position: relative; width: 100%; height: 501px; background: url(../img/header2.jpg); >#inner_wrap_logo

Отслеживать

задан 12 ноя 2016 в 15:26

652 1 1 золотой знак 8 8 серебряных знаков 21 21 бронзовый знак

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

#header < position: relative; width: 100%; height: 501px; background: url(http://conceptartworld.com/wp-content/uploads/2013/09/Tank_Concept_Art_by_Chad_Weatherford_01.jpg); >#inner_wrap_logo
 

Отслеживать

ответ дан 12 ноя 2016 в 15:39

4,034 1 1 золотой знак 11 11 серебряных знаков 20 20 бронзовых знаков

#inner_wrap_logo нужно задавать overflow: hidden; или clearfix

12 ноя 2016 в 16:18

@ElenaSemenchenko зачем?

12 ноя 2016 в 16:23

Затем, что внутри плавающий блок второе изображение img

12 ноя 2016 в 16:27

Вариант 1 flex:

#header < position: relative; width: 100%; height: 501px; background: url(../img/header2.jpg); >#inner_wrap_logo

Вариант 2 float:

#header < position: relative; width: 100%; height: 501px; background: url(../img/header2.jpg); >#inner_wrap_logo < margin: 0 auto; width: 960px; height: 100%; overflow: hidden; >#inner_wrap_logo img:first-of-type < float:left; >#inner_wrap_logo img:last-of-type

Отслеживать

ответ дан 12 ноя 2016 в 15:38

22.4k 11 11 золотых знаков 57 57 серебряных знаков 121 121 бронзовый знак

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *