колонки таргетинга энного(сделанный столбец-количество)

Допустим, у меня есть это 

<ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>


ul {
   column-count: 2;
}

И я хочу выровнять первый столбец справа, а второй слева, есть ли способ нацелить один из этих столбцов с помощью CSS-селекторов?

4 5
css css3 multiple-columns

4 ответа:

На данный момент нет способа нацелить N-й столбец с помощью чистого css.

6

Вы можете использовать column-gap чтобы сделать то, что вы хотите, хотя, поскольку нельзя использовать calc(100% - liWidth * colCount) в качестве значения для column-count, вам придется использовать некоторый javascript прямо сейчас 

function calcGap() {
    var gap = window.innerWidth - (columnCount * listWidth) + "px";
    ul.style.webkitColumnGap = gap;
    ul.style.columnGap = gap;
}
calcGap(); // Fire on load
window.onresize = calcGap; // Fire on window resize

Демо-версия

Используя этот метод, вы можете иметь все, что хотите text-align, а также не испортить другие свойства выравнивания

0

Неясно, хотите ли вы выровнять весь столбец или элементы внутри.

Если вы хотите первый, то Зак дерзкий ответ будет кстати.

Если это позже, и вы хотите только CSS решение, это будет так: 

.container {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -ms-column-count: 2;
    column-count: 2;
}

li {
    text-align: right;

}

li:nth-last-child(6) ~ li:nth-child(n+4) {
    text-align: left;
    background-color: lightblue;
}
li:nth-last-child(8) ~ li:nth-child(n+5) {
    text-align: left;
    background-color: lightblue;
}

li:nth-child(n+4) {
    color: red;
}

li:nth-last-child(6) {
    border: solid 1px green;
}
Он основан на предположении, что элементы будут иметь одинаковую высоту, и поэтому 2-й столбец будет начинаться в среднем элементе.

Это решение имеет 2 проблемы.

Во-первых, это громоздко писать, так как вам нужно правила для каждого числа элементов в списке.

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

Демо

Лучшее демо

Динамическая демонстрация

0

Используйте nth-child селектор like this 

ul li:nth-child(1) {
  text-align: right;
}
ul li:nth-child(2) {
  text-align: left;
}
0