Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Как выровнять div по нижнему краю?

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


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

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

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


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

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


16 комментариев

hakypuhbiu
Юзер

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


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

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

ZeN41k
Юзер

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

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

ZeN41k
Юзер

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


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

irrwisch
Юзер

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

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

ZeN41k
Юзер

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


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

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

irrwisch
Юзер

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

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

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

ZeN41k
Юзер

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


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

irrwisch
Юзер

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

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

ZeN41k
Юзер

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

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

irrwisch
Юзер

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

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

ZeN41k
Юзер

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


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

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

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

list
Юзер

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

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

ZeN41k
Юзер

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


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

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

irrwisch
Юзер

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

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

ZeN41k
Юзер

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

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

irrwisch
Юзер

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

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

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

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

наверх