X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Привязать картинки к низу блока
Prolific
Prolific
Topic Starter сообщение 6.7.2017, 20:14; Ответить: Prolific
Сообщение #1


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

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

Вот код:
<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>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AlexZaw
AlexZaw
сообщение 6.7.2017, 21:11; Ответить: AlexZaw
Сообщение #2


Нет такого свойства как display: relative. Есть position: relative,
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Prolific
Prolific
Topic Starter сообщение 6.7.2017, 21:12; Ответить: Prolific
Сообщение #3


Я это и имел ввиду, ошибся. Идеи решения есть?)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AlexZaw
AlexZaw
сообщение 6.7.2017, 21:16; Ответить: AlexZaw
Сообщение #4


row - position:relative
картинкам position:absolute, bottom:0
если в кучу не собьются должно все сработать
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Prolific
Prolific
Topic Starter сообщение 6.7.2017, 23:19; Ответить: Prolific
Сообщение #5


Я так и делал, не работает.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AlexZaw
AlexZaw
сообщение 7.7.2017, 0:21; Ответить: AlexZaw
Сообщение #6


css код скиньте, посмотрим что у вас там, поковыряемся
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Prolific
Prolific
Topic Starter сообщение 7.7.2017, 10:16; Ответить: Prolific
Сообщение #7


[CSS]
section#team {
h2 {
@extend .bold;
text-transform: uppercase;
color: #585858;
}
p {
@extend .regular;
font-size: 16px;
color: #737373;
}
hr {
border: 1px solid #ff3b3b;
width: 15%;
text-align: left; /* для ie */
margin: 25px auto 30px 0;
}
.team_main {
padding: 5px 0 0 0;
}
h3 {
margin: 0 0 0 0;
@extend .semibold;
text-transform: uppercase;
color: #585858;
}
.team_socials {
font-style: italic;
font-size: 16px;
a {
color: #585858;
transition: 0.3s;
&:hover {
color: #ff2d2d;
}
}
}
}
[/CSS]
<section id="team">
<div class="container">
<div class="section_header">
<div class="row">
<div class="col-md-5">
<h2>Meet our team</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipis cing elit, sed dooing eiusmod tempor incididut labore Ui / Ux , print template.</p>
</div>
</div>
<hr>
</div>
<div class="section_main">
<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>
</div>
</div>
</section>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AlexZaw
AlexZaw
сообщение 7.7.2017, 12:31; Ответить: AlexZaw
Сообщение #8


Вообще странно, по идее должны к низу прижиматься, может где то стоит ненужное позиционирование?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Prolific
Prolific
Topic Starter сообщение 7.7.2017, 12:45; Ответить: Prolific
Сообщение #9


Все чисто. Я размечал сетку по-бутстраповски после подредачил шрифты, цвета и т.д. но позиционирование не трогал. Такое ощущение, что это делает сам bootstrap, но как это исправить я пока не понял.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AlexZaw
AlexZaw
сообщение 7.7.2017, 13:10; Ответить: AlexZaw
Сообщение #10


А целиком страничку можно? Вместе со всеми стилями, файлами, картинками, можно в архиве куда-нибудь залить.
Может инспектор чего покажет.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыКто и зачем покупает картинки обезьян по $200 тысяч?
NFT
 167 metvekot 27416 6.3.2024, 21:58
автор: Boymaster
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВыравнивание картинки по центру между текстом
 10 NikN 2637 6.1.2021, 23:24
автор: buypushplatform
Открытая тема (нет новых ответов) Отображение нужного блока при клике.
 0 bhtml 1665 10.7.2020, 15:18
автор: -bhtml-
Открытая тема (нет новых ответов) Нужно добавить картинки на сайт
И видео
 2 Ksardas777 4092 17.11.2018, 10:41
автор: Intuit89
Открытая тема (нет новых ответов) Прижать к низу экрана
 2 sergei_burg 5414 2.9.2018, 23:17
автор: -dkflbr-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 19.4.2024, 22:25

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet