Вертикальный интервал деления

Как вы распределяете по горизонтали 3 деления с наименьшим количеством кода?

У меня есть 3 div, которые имеют один и тот же класс, и мне нужно распределить их по горизонтали с 19 пикселями пространства между каждым div.

Мое решение в настоящее время состоит в том, чтобы дать первым двум элементам div правое поле в 19 пикселей и назначить отдельный класс для третьего элемента div, который дает ему левое поле в 19 пикселей.

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

2 ответа

Решение

Смотрите: http://jsfiddle.net/thirtydot/q6Hj8/

.yourDivClass + .yourDivClass {
    margin-left: 19px
}

Это использует соседний братский комбинатор, чтобы применить margin-left каждому .yourDivClass которому предшествует .yourDivClass - другими словами, все, кроме первого.

Вам нужны только два столбца с правым полем; третий столбец не нуждается в дополнительном поле. Граница добавлена, чтобы вы могли видеть ее в скрипке.

 div.hasMargin
{
    Поля справа: 19 пикселей;
}

div.column
{
    цвет бордюра: черный;
    стиль границы: твердый;
    ширина границы: 1px;
    плыть налево;
} 

Вот скрипка

Другие вопросы по тегам