Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы по вёрстке Как выровнять div по нижнему краю?

Как выровнять div по нижнему краю?


     06.09.2016    Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS)    373

вопрос
Вебмастеры, уже больше часа колупаюсь и не получается выровнять див по нижнему краю, чтобы див был в желтой области:

Как выровнять div по нижнему краю?


Вот код элемента - https://jsfiddle.net/zenchik/xvxvy6k3/
Помогите пожалуйста!

Ответа пока нет


Комментарии пользователей (16)

hakypuhbiu
92 | 3

hakypuhbiu - 6 сентября 2016 13:24 - Юзер


Открой стили и допиши то что выделил жирным.

.post-story {
color: #000000;
font-size: 13px;
padding-top: 6px;
height: 220px; /* Высота блока краткой новости.*/
}

ZeN41k
87

ZeN41k - 6 сентября 2016 14:05 - Юзер

помогло) большое спасибо) как это я так не додумался, всё хотел, чтобы оно прижимало к низу)

ZeN41k
87

ZeN41k - 6 сентября 2016 15:05 - Юзер


блин, везде отображается хорошо, но в Mozzila Firefox отображается по-другому, может как-то по-другому прописать или как-то этот код доработать?

irrwisch
47

373 | 140

irrwisch - 6 сентября 2016 15:14 - Юзер

Потому что глупо задавать фиксированную высоту, она ведь может меняться, в зависимости от количества текста, Держи https://jsfiddle.net/xvxvy6k3/2/

ZeN41k
87

ZeN41k - 6 сентября 2016 15:23 - Юзер


Дата под картинкой, а надо, чтобы была возле картинки справа, прикрепил скриншот (цель - желтая область)

Mozzila использует походу другой шрифт и отступы между строк вроде чуть больше, поэтому такая проблема и создается. Может прописать индивидуально для Mozilla код типа -moz? Потому что даже Internet Explorer правильно отображает.

irrwisch
47

373 | 140

irrwisch - 6 сентября 2016 15:31 - Юзер

Можно конечно для лисы написать отдельные стили, но проще подвинуть дату, при этом оставив её под картинкой https://jsfiddle.net/xvxvy6k3/3/

Можно ещё убрать все float и сделать через flexbox

ZeN41k
87

ZeN41k - 6 сентября 2016 15:40 - Юзер


чуть-чуть не так) и у меня clear:both почему-то нормально не работает, после него отступ на 700px в длину..

irrwisch
47

373 | 140

irrwisch - 6 сентября 2016 15:45 - Юзер

переделывайте значит вёрстку при помощи flexbox, иначе без костылей не обойтись

ZeN41k
87

ZeN41k - 6 сентября 2016 15:57 - Юзер

а если конкретно под Mozill'у прописать код ? Я просто что-то в Инете не нашел информацию про разновидности -moz ...Если у вас есть ссылка на информацию - скиньте пожалуйста!

irrwisch
47

373 | 140

irrwisch - 6 сентября 2016 16:03 - Юзер

это огромный, не валидный костыль @-moz-document http://lists.w3.org/Archives/Public/www-style/2004Aug/0135

ZeN41k
87

ZeN41k - 6 сентября 2016 19:31 - Юзер


в общем, посмотрев на статистку использования mozilla решил решить проблему, но по-другому реализовать, код изменил:

https://jsfiddle.net/zenchik/xvxvy6k3/4/

убрал height и добавил в .post display:inline-block; и теперь вроде легко будет прижать блок data к низу страницу, но vertical-align не работает =(

list
1

17 | 7

list - 6 сентября 2016 21:43 - Юзер

Как вариант https://jsfiddle.net/xvxvy6k3/6/

ZeN41k
87

ZeN41k - 7 сентября 2016 10:33 - Юзер


посмотрел ваш код, по идее вот то, что нужно:) НО есть проблема у меня на сайте - clear:both с БАГОМ (прикрепил скриншот).

Пытался исправить так: к классу middle (это родительский блок по центру) прописал display:table , всё стало хорошо, но футер наложился на элементы и стал кривой(

irrwisch
47

373 | 140

irrwisch - 7 сентября 2016 15:23 - Юзер

Я ж говорил, делайте на флексбоксах
https://jsfiddle.net/xvxvy6k3/10/

ZeN41k
87

ZeN41k - 7 сентября 2016 15:35 - Юзер

да, вижу всё четко, но поддержка старыми версиями браузеров неполная вроде. Как у них будет отображаться ?

irrwisch
47

373 | 140

irrwisch - 7 сентября 2016 15:52 - Юзер

IE11, Chrome 29+, FF 28+, Opera 12.1+ - поддерживают нормально, всё что ниже это уже динозавры, которые не стоит поддерживать.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы