Адаптивные списки и селектор nth-child

У меня проблемы с пониманием nth-child, чтобы создать список с помощью медиа-запросов. У меня есть неупорядоченный список из 6 элементов, в котором элементы отображаются по горизонтали с использованием display:inline-block; следующим образом:

[элемент1] [элемент2] [элемент3] .... [элемент6]

ul {
    list-style-type: none;
    margin-left: auto;
    padding:0;
    text-align:center;
    li {
        display:inline-block;
        font-size: ms(3);
        padding-left: 0.5em;
        margin-left: 0.5em;
        margin-bottom: 0.2em;
        border-left: 1px dotted #d1d1d1;
        &:first-child {border:none; margin-left:0;};
        a {text-decoration:none;}

}

Я использую Foundation 3.2 и Sass, и этот неупорядоченный список находится внутри блока из 12 столбцов. В идеале, если ширина браузера меньше 768 пикселей, список должен разбиваться следующим образом:

[элемент1] [элемент2] [элемент3]

[item4] [item5] [item6]

Более того, когда экран меньше 320 пикселей, я бы хотел, чтобы список отображался следующим образом:

[item1] [item2]

[item3] [item4]

[item5] [item6]

Как я могу реализовать что-то подобное?

Кроме того, я использую border-left: 1px dotted #d2d2d2, чтобы сделать разделитель между элементами списка, не имея границы для первого элемента. Как я могу использовать nth-child, чтобы в случае 768 я не получал левую границу для 1-го и 4-го элементов? Кроме того, в случае 320, как мне реализовать nth-child, чтобы не было левой границы в пунктах 1,3 и 5


responsive-design sass media-queries html-lists zurb-foundation
person IgnorantUser    schedule 18.01.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы рассматривали возможность использования модуля CSS Columns? Он сделает всю математику за вас (отступы, разделитель и т. Д.). Единственная проблема заключается в том, что он сортирует элементы в другом порядке, чем вы хотите.

Если вы используете ширину столбца определенной ширины, он будет добавлять / удалять столбцы по мере необходимости для ширины устройства без необходимости мультимедийных запросов.

http://jsfiddle.net/W84Ja/

ul {
    padding: 0;
    columns: 8em;
    column-rule: 1px solid;
    column-gap: 2em;
    list-style-type: none;
}

Если вы ищете разделение в процентном стиле, используйте определенное количество столбцов в сочетании с медиа-запросами.

http://jsfiddle.net/W84Ja/1/

ul {
    padding: 0;
    columns: 2;
    column-rule: 1px solid;
    column-gap: 2em;
    list-style-type: none;
}

@media (min-width: 25em) {
    ul {
        columns: 3;
    }
}

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

http://jsfiddle.net/W84Ja/2/

@media (max-width: 20em) {
    li:nth-child(even) {
        border-left: 1px solid;
    }
}

@media (min-width: 20em) and (max-width: 30em) {
    li:nth-child(3n+2), li:nth-child(3n+3) {
        border-left: 1px solid;
    }
}
person cimmanon    schedule 18.01.2013
comment
Я считаю, что столбцы css3 предназначены для форматирования больших фрагментов текста. Кроме того, я хочу иметь изображения в элементах моего списка, и сейчас чтение столбцов css3 кажется излишним, поскольку я совершенно с ними не знаком. Что касается вашей реализации элементов inline-block, она работает не так, как предполагалось. Я просто хочу, чтобы список разбился на две строки по 3 элемента в случае 768 пикселей и на три строки по два элемента в случае 320 пикселей. Список ни в коем случае не должен нарушаться. - person IgnorantUser; 18.01.2013
comment
В исходном вопросе изображения вообще не упоминались, но столбцы CSS отлично с ними работают: jsfiddle.net/ W84Ja / 6. Медиа-запрос только показывает, какие селекторы необходимы для добавления границ к нужным элементам. Вы должны вычислить, что сделает элементы достаточно широкими, чтобы произошло обертывание. - person cimmanon; 18.01.2013
comment
Я понял, что в случае 768px мне нужно использовать nth-child (3n + 1), а в случае 320px nth-child (2n + 2). Математика в моей ситуации сложна, так как у меня будут изображения с логотипами внутри списка, а ширина не может быть предопределена. Любые идеи? - person IgnorantUser; 18.01.2013
comment
Если все полностью неизвестно (и вы не хотите использовать столбцы CSS), у вас есть 2 варианта: Flexbox jsfiddle .net / W84Ja / 8 (префиксы не включены) или плавает с очистками jsfiddle.net/W84Ja/ 9 - person cimmanon; 18.01.2013
comment
В настоящее время я пробую гибкую реализацию, но документации мало, не говоря уже о том, что стандарт менялся много раз. Пытаюсь понять, как именно использовать -webkit-flex-wrap: wrap; так что список разбивается именно там, где я хочу. - person IgnorantUser; 18.01.2013
comment
Это должно вам помочь: gist.github.com/4461470. Flex-wrap предназначен только для определения, будет ли элемент обертываться или в каком направлении он должен оборачиваться. - person cimmanon; 18.01.2013
comment
Спасибо, но я новичок в Sass, поэтому этот код мне кажется немного непоследовательным (так как у меня нет опыта). Вот обновленная скрипка с тем, что я сделал jsfiddle.net/IgnorantUser/W84Ja/19 Левая граница работает должным образом после достижения точки останова (элементы 1 и 4 не имеют левую границу) я бы хотел также разбить список на четвертом элементе, но я не знаю, как - person IgnorantUser; 18.01.2013
comment
Я бы посоветовал взять это в чат, но у вас пока недостаточно репутации ›‹. Суть написана в том же стиле, что и миксины Compass CSS3, и должна работать сразу после установки, если вы не понимаете различий между тремя спецификациями. Точки останова на перенос контролируются частью flex-basis свойства flex: flex: 1 1 30%. Это означает, что мне разрешено расти (1-й 1) или уменьшаться (2-й 1), но я действительно хочу иметь ширину 30%. - person cimmanon; 18.01.2013
comment
не могу понять эту вещь: / - person IgnorantUser; 19.01.2013
comment
Попробуйте это: jsfiddle.net/W84Ja/20. Вам придется немного повозиться с flex-базисом (flex) и настроить медиа-запросы, но, похоже, он работает правильно с образцами данных. - person cimmanon; 19.01.2013
comment
классно! :) Спасибо за вашу помощь! - person IgnorantUser; 20.01.2013
comment
Могу я также спросить, какой вариант рекомендуется использовать для старых браузеров? следует ли использовать float: left и отказаться от подхода с разрывом списков для совместимости со старым браузером? - person IgnorantUser; 21.01.2013
comment
Вы можете безопасно использовать float или inline-block в качестве запасного варианта для flexbox. Если браузер поддерживает flexbox, он полностью игнорирует поплавки. - person cimmanon; 21.01.2013
comment
Я пытаюсь разместить резервный список в центре, но не могу сделать это должным образом, так как расположение также повлияет на современные браузеры. Возможно ли иметь запасной вариант для display: flex, который не повлияет на современные браузеры? Также IE и Safari не поддерживают display: flex, тогда как в Firefox вам нужно перейти в about: config и включить его вручную, не говоря уже о том, что он поддерживает только однострочный flexbox (информация из MDN) - person IgnorantUser; 21.01.2013
comment
На всякий случай я нашел пример того, как должен вести себя список. partialmobile.com проверьте избранные партнеры. Судя по тому, что я видел из их кода, они используют display: block и display: inline-block, но я просто не могу понять, как они разбивают список там, где они хотят. - person IgnorantUser; 21.01.2013
comment
Элементам предоставлена ​​ширина, они используют проценты вместо пикселей. Вы указали, что ширина не может быть предопределена в предыдущем комментарии. - person cimmanon; 21.01.2013