Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Как выровнять div по нижнему краю?

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

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

вопрос

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

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

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

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

Юзер

171

hakypuhbiu - 2016-04-136 сентября 2016 13:24 - #58493

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

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

Юзер

133

ZeN41k - 2016-04-136 сентября 2016 14:05 - #58494

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

Юзер

133

ZeN41k - 2016-04-136 сентября 2016 15:05 - #58496

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

Юзер

494

irrwisch - 2016-04-136 сентября 2016 15:14 - #58498

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

Юзер

133

ZeN41k - 2016-04-136 сентября 2016 15:23 - #58500

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

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

Юзер

494

irrwisch - 2016-04-136 сентября 2016 15:31 - #58502

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

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

Юзер

133

ZeN41k - 2016-04-136 сентября 2016 15:40 - #58503

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

Юзер

494

irrwisch - 2016-04-136 сентября 2016 15:45 - #58504

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

Юзер

133

ZeN41k - 2016-04-136 сентября 2016 15:57 - #58505

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

Юзер

494

irrwisch - 2016-04-136 сентября 2016 16:03 - #58506

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

Юзер

133

ZeN41k - 2016-04-136 сентября 2016 19:31 - #58507

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

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

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

Юзер

list - 2016-04-136 сентября 2016 21:43 - #58509

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

Юзер

133

ZeN41k - 2016-04-137 сентября 2016 10:33 - #58516

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

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

Юзер

494

irrwisch - 2016-04-137 сентября 2016 15:23 - #58526

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

Юзер

133

ZeN41k - 2016-04-137 сентября 2016 15:35 - #58528

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

Юзер

494

irrwisch - 2016-04-137 сентября 2016 15:52 - #58530

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

non-stop | Как решить проблему индексации DLE в пои ... ¹

non-stop
Как решить проблему индексации DLE в поиске Bing?
19-12-2024, 17:02

Забыл написать что обновился до последней версии 17.3
Интересно узнать, это только у меня проблема, или это проблема движка? проверьте свои сайты на наличие в поиске Bing.
В 11 винде именно эта поисковая система стоит по умолчанию . кроме того эта же поисковая система отвечает за индекс еще одного поисковика - yahoo. Эти системы могут давать дополнительный процент пискового трафика на сайты.
lutskboy | Как максимально грамотно организовать до ... ¹

lutskboy
Как максимально грамотно организовать добавление материалов через SQL-запросы?
18-12-2024, 21:39

все верно. related_ids автоматом заполняется потом.
derebas | Убираем xfsearch из адресной строки ⁷

derebas
Убираем xfsearch из адресной строки
16-12-2024, 02:35

в правилах транслитерации для tagvalue поставьте замену " " => "-", например так
str_replace(array('.', ' ', '/', '&', "'", '+', '«', '»', ':', '!'), array('', '-', '-', 'and', '', '', '', '', '', '')
toxicpioner | Убираем xfsearch из адресной строки ⁷

toxicpioner
Убираем xfsearch из адресной строки
15-12-2024, 19:31

если в доп поле есть пробел, будет выдавать просто 403 стр
dj-avtosh | Воспользовался хаком удаление html из ад ... ²

dj-avtosh
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
12-12-2024, 17:26

Нужно правило с year поднять выше всех в .htaccess
TeraMoune | Воспользовался хаком удаление html из ад ... ²

TeraMoune
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
11-12-2024, 22:12

У вас убрано слишком много отличительных признаков в ссылках и теперь ссылки пересекаются. Убрали xfsearch, убрали html, а так же зачем то убрали дефиз разделяющий id и alt_name. Теперь некоторые ссылки будут отвечать выражению под правила ссылок новостей. Исправить вы можете только переосмыслив эти ссылки и добавить в них каких-то отличительных особенностей, переосмыслить чпу.
toxicpioner | Как упорядочить ID новостей ¹⁹

toxicpioner
Как упорядочить ID новостей
9-12-2024, 22:24

***Комментарий удален***
DnCnv | Как показать только одну категорию, к ко ... ¹

DnCnv
Как показать только одну категорию, к которой принадлежит новость?
9-12-2024, 01:46

***Комментарий удален***
web102 | Почему не отображается картинка в галере ... ³

web102
Почему не отображается картинка в галерее?
4-12-2024, 11:49

дайте адрес сайта. можно в личку
Shandi | Почему не отображается картинка в галере ... ³

Shandi
Почему не отображается картинка в галерее?
3-12-2024, 08:53

Мне как ламеру ничего не понятно:( Кто-то это исправляет за денужку?