Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 07.07.2017, 10:46   #1
Prolific
 
Регистрация: 07.07.2017
Сообщений: 9
Репутация: 10
По умолчанию Привязать картинки к низу блока

Привет, форумчане. Появилась следующая проблема: нужно привязать картинки к низу блока. Пользуюсь bootstrap, там есть блок row, в который можно пихать другие элементы и он изменяет свою высоту. У меня этот блок row разбит на 2 главных столбца (4 колонки и 8 колонок). Второй столбец, где 8 колонок, разбит на 2 строки, в первой информация, во второй картинки (4 штуки в ряд). Дело в том, что первую строку нужно оставить как есть, а вторую с картинками отправить вниз самого родительского блока row. Выделил родительский блок красным, стрелками показал куда нужно двигать картинки, чтобы было понятно.


Пробовал ставить родительской строке position: relative, а строке с картинками писать bottom: 0; не помогло, можно конечно margin'ом отступить сверху, но тогда можно забыть про адаптив.

Вот код:
Код HTML:
<div class="row"> <!--Главная строка, блок выделен красным-->
	<div class="col-md-4"><!-- Колонка с большой картинкой, которая задает высоту -->
		<img class="team_main" src="img/team_main.jpg" alt="">
	</div>
	<div class="col-md-8"><!-- Колонка с инфой и картинками -->
		<div class="row"><!-- строка для инфы, стоит как и надо -->
			<div class="col-md-8">
				<h3>Mark Waugh</h3>
				<br>
				<p>Lorem ipsum dolor sit amet, consectetur adipis cing elit, sed dooing eiusmod tempor incididut labore Ui / Ux , print template.</p>
				<br>
				<div class="list-inline team_socials">
					<li><a href="#">Facebook</a></li>
					<li><a href="#">Dribble</a></li>
					<li><a href="#">Behance</a></li>
					<li><a href="#">Twitter</a></li>
				</div>
				<br>
			</div>
		</div>
		<div class="row"><!-- СТРОКА, КОТОРУЮ НУЖНО ОПУСТИТЬ ВНИЗ!!! -->
			<div class="col-md-3"><img src="img/team_profiles.jpg" alt=""></div>
			<div class="col-md-3"><img src="img/team_profiles.jpg" alt=""></div>
			<div class="col-md-3"><img src="img/team_profiles.jpg" alt=""></div>
			<div class="col-md-3"><img src="img/team_profiles.jpg" alt=""></div>
		</div>
	</div>
</div>
Prolific вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Установка блока внизу блока родителя, без использования "relative" Bulat Ibrahim HTML и CSS 21 30.05.2017 00:58
Blowfish (резервирование дополнительного байта для блока, говорящий о длине блока) ITdocer Общие вопросы C/C++ 0 21.05.2014 15:40
Как привязать блок на сайте к низу, если высота блока не указана Санеккк Помощь студентам 10 06.01.2014 17:40
Печать Image несколько копий в одной строке, + текст в низу картинки... Oleg Romanchuk Общие вопросы Delphi 0 10.11.2011 12:57
Футер не прилипает к низу окна antmihlin HTML и CSS 2 07.01.2011 14:41


16:13.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru