Как удалить отступы из последнего сгенерированного DIV на странице

Question

Как удалить отступы из последнего сгенерированного DIV на странице

0

У меня есть установка ExpressionEngine, которая генерирует DIV для каждого человека на странице контакта. У меня есть значение margin-bottom, равное 20px для этих DIV, которые сгенерированы, но я хочу, чтобы последний DIV имел край 0px внизу, так что между дном последнего div и нижней частью контейнера имеется такое же количество пробелов так как есть вершина первого DIV. Я знаю, что вы можете использовать что-то вроде :nth-child для элементов P и LI, но мне интересно, есть ли подобный способ сделать это со всем div. Это код, который я использую:

{people}
    <div class="bio mobile-inner">
        <img class="grid_4_desktop grid_4_tablet grid_1_mobile" width="216" height="auto" title="" src="{image}" />
        <div class="grid_12_desktop grid_8_tablet grid_1_mobile leader-info">
            <h3>{name}</h3>
            <h5>{title}</h5>
            <p>{bio}</p>
        </div>
    </div>
{/people}

Заранее спасибо!

APAD1 12 нояб. 2013, в 17:27

Источник

Теги:

html

css

margin

3 ответа

2

Не зная, какой элемент имеет разницу, трудно сказать, однако это должно решить его, предполагая, что элемент .bio имеет margin-bottom, вы использовали бы:

.bio:last-child {
    margin-bottom:0px;
}

Возможно, вам понадобится немного более специфично в селекторе, чтобы убедиться, что он перезапишет первоначальное объявление. Кроме того, убедитесь, что это объявление появилось после первоначального в таблице стилей, поскольку оно читается сверху вниз. Таким образом, вы не хотите, чтобы он был перезаписан.

Josh Crozier 12 нояб. 2013, в 13:04

1

#your_parent_container div:last-of-type {
    margin-bottom: 0; 
}

DEMO

Turnip 12 нояб. 2013, в 13:14

1

Вам, вероятно, следует заменить общий div именем класса, поскольку после него могут быть другие элементы div .
Josh Crozier 12 нояб. 2013, в 16:09
0

Это не сработает. Последний тип не работает с именами классов. Только типы элементов. Демо: jsfiddle.net/YFL3A/1
Turnip 12 нояб. 2013, в 16:13
0

:last-child работает, только если элемент является ПОСЛЕДНИМ .bio:last-child своего родителя, поэтому .bio:last-child также не будет работать, если после последнего .bio был еще один div. Мне кажется нелогичным, что нет селектора :last-of-class
Turnip 12 нояб. 2013, в 16:26

Показать ещё 1 комментарий

Ещё вопросы

Вам, вероятно, следует заменить общий div именем класса, поскольку после него могут быть другие элементы div .
Это не сработает. Последний тип не работает с именами классов. Только типы элементов. Демо: jsfiddle.net/YFL3A/1
:last-child работает, только если элемент является ПОСЛЕДНИМ .bio:last-child своего родителя, поэтому .bio:last-child также не будет работать, если после последнего .bio был еще один div. Мне кажется нелогичным, что нет селектора :last-of-class

DaniP · Accepted Answer · 2013-11-12T13-34-00.000Z

Вы можете использовать это:

div.bio:last-child {
  margin-bottom:0px;
}

Демо-версия http://jsfiddle.net/Z7Whb/1/

Это сработало отлично, большое спасибо!