Как расположить картинки в одну строку?
Нужно расположить картинки в один ряд с сохранением пропорций, одинаковой высотой и заданной шириной ряда.
Т.е. имеется родительский блок div с шириной 700px. В нем нужно расположить в один ряд, скажем, 4 картинки так, чтобы этот ряд растянулся на всю ширину родительского дива. Высота у картинок должна быть однинаковой. Пропорции должны сохраняться.
В качестве примера можно посмотреть как располагаются картинки на vk.com
- Вопрос задан более трёх лет назад
- 5604 просмотра
3 картинки в ряд css
Css картинки не стают в ряд
Добрый день, столкнулся с проблемой картинки не помещаются в ряд (как я понимаю причину. ) кто.
Картинки в ряд
Как поставить картинки с ссылкой в один горизонтальный ряд ? <p><a href="text1.html"><img.
Из картинки в CSS
Народ, захотелось заменить картинку на CSS+HTML Не могу подобрать примерный градиент, как на.
50 / 42 / 25
Регистрация: 05.12.2013
Сообщений: 275
mrVlados95, адрес сайта, если возможно.
Регистрация: 28.12.2011
Сообщений: 65
GreenForest, http://mrvlados.my1.ru/prechu/index.html
50 / 42 / 25
Регистрация: 05.12.2013
Сообщений: 275
У Вас вообще вот так написан код
1 2 3 4 5
div class="conteiner"> img src="img/1.png" alt="" idth="186" height="186"/>a href="#">Contrary to popular/a> /div> img src="img/2.png" alt="" idth="186" height="186"/>a href="#">Contrary to popular/a> img src="img/3.png" alt="" idth="186" height="186"/>a href="#">Contrary to popular/a>
Добавлено через 4 минуты
1 2 3 4 5 6 7 8
div class="container"> img src="img/1.png" alt="" idth="186" height="186"> img src="img/2.png" alt="" idth="186" height="186"> img src="img/3.png" alt="" idth="186" height="186">/div> a href="#"> Вопреки распространенному/font>/font>/a> a href="#"> Вопреки распространенному/font>/font>/a> a href="#"> Вопреки распространенному/font>/font>/a>
Вот так. Только отступы между ними задай, какие тебе нужны.
Регистрация: 08.01.2014
Сообщений: 28
заверните картинку со ссылкой в div, а в стилях пропишите
.conteiner div{display: inline-block; width:186px}
но также можно было не задавать ширину для div, а просто поставить тег
после картинки
50 / 42 / 25
Регистрация: 05.12.2013
Сообщений: 275
Сообщение от Sasha001 
поставить тег
Разве тогда картинки не будут друг под другом?
Регистрация: 08.01.2014
Сообщений: 28
GreenForest, для этого и нужно создать div’ы внутри блока .conteiner для картинки вместе со ссылкой, они вроде как одно целое
50 / 42 / 25
Регистрация: 05.12.2013
Сообщений: 275
Sasha001, Даладна? А может лучше не заморачиваться и пододвинуть div отсюда
1 2 3 4 5
div class="conteiner"> img src="img/1.png" alt="" idth="186" height="186"/>a href="#">Contrary to popular/a> /div> img src="img/2.png" alt="" idth="186" height="186"/>a href="#">Contrary to popular/a> img src="img/3.png" alt="" idth="186" height="186"/>a href="#">Contrary to popular/a>
1 2 3 4
div class="container"> img src="img/1.png" alt="" idth="186" height="186"> img src="img/2.png" alt="" idth="186" height="186"> img src="img/3.png" alt="" idth="186" height="186">/div>
Зачем переполнять код дополнительными ненужными слоями?
Регистрация: 08.01.2014
Сообщений: 28
GreenForest,
вот так правильно будет
1 2 3 4 5
div class="conteiner"> div>img src="img/1.png" alt="" idth="186" height="186"/>a href="#">Contrary to popular/a>/div> div>img src="img/2.png" alt="" idth="186" height="186"/>a href="#">Contrary to popular/a>/div> div>img src="img/3.png" alt="" idth="186" height="186"/>a href="#">Contrary to popular/a>/div> /div>
т.к. эти блоки можно двигать(например в центр или друг от друга на 50px), картинка будет вместе со ссылкой перемещаться, а так в стилях придется отдельно задавать и для картинки, и для ссылки.
Регистрация: 12.01.2015
Сообщений: 4
Здравствуйте, всетаки не могу понять, как поставить картинки чтоб было по три в ряд. Помогите пожалуйста.
1 2 3 4 5 6 7 8
for ($i = 0; $i $anabel_arto_count; $i++):?> echo ${'anabel_arto_'.$i}['img_name'];?>"> 
echo ${'anabel_arto_'.$i}['name'];?> echo ${'anabel_arto_'.$i}['cost'];?> endfor;?>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
div.img { margin: 5px; padding: 5px; height: auto; width: auto; float: left; text-align: center; } div.img img { display: inline; margin: 5px; border: 1px solid rgba(139,0,139,0.2); } div.img a:hover img { border:1px solid #8B008B; } div.desc { text-align: center; font-weight: normal; width: 120px; margin: 5px; }
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Расположить рекламные блоки в ряд, CSS
Подскажите пожалуйста как расположить 5 тизер блоков ГОРИЗОНТАЛЬНО вряд, и чтоб надписи под ними не.
Как задать положение картинки внутри другой картинки? CSS, HTML
Добрый день. Начинаю учить веб-разработку и решил написать простенький сайт. В общем, нужно.
Картинки в ряд
Есть три картинки: две из них вращаются вокруг третьей. Нужна программа, чтобы, при расположении.
Как разместить в ряд три изображения в квадратных областях
В итоге должно получиться что-то типа этого:
Отслеживать
задан 27 мая 2015 в 10:47
352 1 1 золотой знак 2 2 серебряных знака 14 14 бронзовых знаков
Перенесите дополнения из комментариев в сам вопрос. Вопрос должен быть самодостаточным.
27 мая 2015 в 21:25
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
div < background: #737373; float: left; position: relative; width: 30%; padding-bottom: 30%; margin: 1.66%; >div:hover < background: black; >img
Отслеживать
ответ дан 29 мая 2015 в 20:19
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
Да, это то, что было нужно! благодарю Вас!
30 мая 2015 в 4:43
Навскидку — 3 дива у которых ваши изображения — это бекграунд. задайте жестко стороны дивов — и пропорции не сломаются. также можно прописать background-size: contain
опишите подробнее , какое должно быть поведение картинок при расширении / сужении экрана
Отслеживать
ответ дан 27 мая 2015 в 10:56
85 1 1 серебряный знак 12 12 бронзовых знаков
При изменении ширины экрана картинка должна оставаться квадратной и масштабироваться.
27 мая 2015 в 11:03
Жестко это в пикселях? Тогда надо будет через js менять стиль. Или я могу в css менять высоту при изменении ширины?
27 мая 2015 в 11:04
При изменении ширины экрана картинка должна оставаться квадратной и масштабироваться я так понимаю, в таком случае, эти картинки должны меняться и по высоте ? или должно увеличиваться между ними расстояние ? ТОгда так codepen.io/anon/pen/ZGBmYJ
27 мая 2015 в 13:17
При изменении ширины экрана картинки должны тоже изменяться по высоте и ширине, оставаясь квадратными.
27 мая 2015 в 16:36
Вообще правильно это делать при помощи img и какого-нибудь wraper’а. Я просто модифицировал свой пример. Написал небольшой скриптик c использованием jQuery:
$(window).resize( function() < var cw = $('.figure').width(); $('.figure').css(); > ); Отслеживать
ответ дан 27 мая 2015 в 12:37
Astemir Almov Astemir Almov
193 8 8 бронзовых знаков
Пишу приложение на ionic. JQ туда вставлять не хочется, ведь там есть AngularJs. Хотелось обойтись чистым css.
28 мая 2015 в 9:57
Окей. Сейчас будем вспоминать как это сделать при помощи чистого CSS. Вы хотите, чтобы изображения масштабировались по высоте и ширине при изменениях размеров окна?
28 мая 2015 в 10:06
Да, именно так.
29 мая 2015 в 12:33
Не нужны скрипты для этой задачи.
29 мая 2015 в 20:50
Я бы посоветовал использовать какой нибудь css framework, например bootstrap, тогда большинство стандартных вопросов с версткой отпадут сами по себе, так как большинство классов уже готовы к использованию и их просто нужно использовать(Про сетки) , если же нужен ответ на Ваш попробуйте его задать более раскрыто, что бы не всплыли подводные камни.
Отслеживать
ответ дан 27 мая 2015 в 13:13
Kristofer Sanders Kristofer Sanders
1 1 1 бронзовый знак
- html
- css
- вёрстка
- адаптивная-верстка
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
novichok
вот так например должно быть
хотя пробел можно и оставлять
спасибо, попробую )
получилось! мерси
спасибо , я также искал как вставить 4 картинки в ряд . а как пробелы сделать чтобы картинки не сливались ?
( 6 comments — Leave a comment )
18 Dec 2022, 06:11
А при написании новой записи старый вариант вообще исчез. А у нового — отсутствуют многие возможности. Например, опция «показать похожие записи» перестала давать возможность самостоятельно выбрать…
12 Oct 2022, 21:19
В самой ленте друзей такого я не видела, но можно зайти к любому человеку и по дням у него посмотреть через архив
12 Oct 2022, 21:05
Я про френдленту. А вы про что?
12 Oct 2022, 21:01
Все работает, вот к примеру за 12 число у вас один пост https://9997999.livejournal.com/2022/10/12. Заходите в архив или календарь, жмете на активное число и получаете посты за конкретный день. Если…
12 Oct 2022, 20:19
1. Саппорт отписался: указанный мной способ — только для платных подписчиков.
2. С мобильника в ЖЖ не хожу.
Сообщество специально предназначено для обсуждения вопросов, которые могут Вам показаться слишком простыми, для того, чтобы из-за них беспокоить серьёзных людей (в частности, в сообществе lj_ru_support ).
Здесь Вам постараются внятно ответить на вопросы любого уровня, даже если Вам просто лень было отыскивать нужную информацию в FAQ. А равно ничего Вам не будет за то, что Ваш вопрос уже задавался нцать / дцать раз, в том числе буквально сегодня. (С другой стороны, нет никакой гарантии, что ответ будет получен быстро.)
Имеет смысл указать в вопросе, на какой язык настроен Ваш ЖЖ (то есть на каком языке вы видите меню на страницах журналов). Кроме того, если вопрос относится к работе клиента, то подробности типа версии, операционной системы и языка будут весьма полезны.
Периодически здесь будут публиковаться полезные ссылки для тех, кто, опять-таки, в ЖЖ недавно.
Посты «Ура, я создал журнал, добавляйтесь в друзья!» запрещены и будут удаляться. При повторном нарушении авторы отправятся в бан.
Несколько слов для тех, кто соберётся отвечать на вопросы. Во-первых и в-главных: СПАСИБО!