|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
07.07.2017, 09:46 | #1 |
Регистрация: 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> |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Установка блока внизу блока родителя, без использования "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 |