Mansolid
@Mansolid
Начинающий вебмастер

Как обнулить margin-bottom?

Привет, превью к статьям выводятся в виде плитки с пагинацией по 9 штук на странице, у плиток такой код:
.articlecon     { position:relative; float:left; border:1px solid #DEDEDE; border-radius:2px; background:#FFFFFF; width:31.66%; height:546px; margin-left:2.5%; margin-bottom:2.5%; text-align:left; padding:0 30px 20px 30px; overflow:hidden; box-sizing:border-box;}
.articlecon:first-child        { margin-left:0;}
.articlecon:nth-child(3n+4) { margin-left:0;}
я пытаюсь обнулить нижний отступ у последних плиток:
.articlecon:last-child { margin-bottom:0;}

если на странице 4 или 7 плиток, то код работает, а если на странице, 5, 6, 8 или 9 плиток, то есть в нижней строке более 1 плитки то условие .articlecon:last-child { margin-bottom:0;} не работает.
  • Вопрос задан
  • 1133 просмотра
Решения вопроса 1
Krasnodar_etc
@Krasnodar_etc
avito front
Да ну делайте просто через margin-top и убирайте его у первых элементов через nth-child
Костыль немного, но адекватный.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
last-child работает для последнего элемента, а не для всех. Считайте элементы через js и там уже обнуляйте
Ответ написан
Комментировать
@sanok_ps
Веб-разработчик, php-бекенд, Вордпресс
last-child - это один единственный последний элемент, но и то, не обязательно одного типа. А вам нужно обнулять отступ не одному, а всем в последнем ряде. То есть, это может быть и один, может быть и три элемента.
Предлагаю просто заключить их во внешний родительский блок и сделать ему отрицательный нижний отступ в размере отступа блоков:
margin-bottom:-20px;  // если оступ у плиток в 20пикс.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы