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

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

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

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

Отслеживать
задан 12 ноя 2016 в 15:26
652 1 1 золотой знак 7 7 серебряных знаков 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,044 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.3k 10 10 золотых знаков 56 56 серебряных знаков 118 118 бронзовых знаков

Html

 
Text 1
 
Текст 2
 

#one, #two

Отслеживать
ответ дан 12 ноя 2016 в 15:41
1,536 1 1 золотой знак 11 11 серебряных знаков 26 26 бронзовых знаков

• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

Страницы

23 сентября 2011 г.

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

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

Код

Код казался понятен. Вместо выделенного красным и синим вставила код картинки из Пикаса. Посмотрела. Стоят мои картинки как рота солдат на плацу, тесно прижавшись друг к другу. Равнение налево. Меня это совсем не устраивает. Хотелось бы чтобы они стояли на расстоянии вытянутой руки и равнение было по центру. Меня слушаться не хотят. Чуть прикоснулась к ним мышкой, так разбежались в разные стороны как по команде «Вольно». Пробовала менять Left на center или right — никакого результата. Выстраиваются рядышком, но только по вертикали. Все хотят быть первыми. Долго я их передвигала, это напоминало игру в пятнашки. Результат нулевой. Но все-же я их построила. Не захотели слушать меня, назначим «Лидера». Таким лидером оказалась, как ни банально, картинка под номером один. Поставила ее по центру, благо в Блоггере это не проблема. А последующие номера подводила с правой стороны. Если какая-то картинка задерживалась справа, нажимала на нее и кликала «Выровнять по центру». С тремя картинками проблем особых и не было.

Решила усложнить задачу: поставить 5 картинок, да еще и со ссылками. Как у виджета Linkwithin . Вместо выделенного синим, как и раньше, вставила код подготовленных картинок. А вместо выделенного красным — ссылки на статьи, куда должны вести картинки. Alt и Title тоже прописала. Подправила их мышкой как в предыдущем примере. Результат вполне устраивал.

Все о картинках. Можно почитать.

С этим кодом можно экспериментировать еще и сделать так, чтобы показывались маленькие картинки, а при нажатии — открывались большие.Это вы сделаете и сами, дочитав статью до конца. Возникла одна идея: если я все равно собираю ряд из разбросанных картинок, попробую их вставить в редакторе через кнопку со своего компьютера без всяких кодов. Смотрим что из этого получилось.

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

Раз уж так все легко получилось, попробуем вариант с увеличением картинки. Вставляем из компьютера через редактор подготовленную картинку большого размера. Из визуального редактора переключаемся на вкладку Изменить HTML. Выделяем код своей картинки. Он имеет такой вид:

Выделенное розовым, ссылку — не трогаем. А вот со второй половиной (голубой) поработаем. Все изменения производим на вкладке Изменить HTML. Сначала уменьшим размер картинки. Я хочу поставить 3 картинки в ряд. Учитывая ширину поста и зазоры между картинками, решила что примерная ширина картинки должна быть width=»160″. А чтобы пропорции изображения остались неизменными, высота height=»120″. Зная исходный размер картинки, посчитать пропорции несложно или загляните в редактор, где обрабатываете свои изображения. Ну и чтоб уж было все по-правилам, вставляем Alt и Title. Подправленный код будет выглядеть так:

Аналогичным образом подправила код двух других картинок и поняла что уже чему-то научилась. Попробуйте кликнуть.

Для полного завершения мне не хватало рамок. Я их, изрядно помучившись, перебрав известные мне варианты, все-же соорудила и была довольна. Описывать не буду, это громоздко. Зато после всех моих мучений нашла элегантный выход. Сейчас попробуем им воспользоваться.

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