Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

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

Привет, форумчане. Появилась следующая проблема: нужно привязать картинки к низу блока. Пользуюсь 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 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Установка блока внизу блока родителя, без использования "relative" Bulat Ibrahim HTML и CSS 21 29.05.2017 23: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 13:41