Многостолбцовый макет элементов списка CSS неправильно выравнивается в Chrome - PullRequest
Новая
       11

Многостолбцовый макет элементов списка CSS неправильно выравнивается в Chrome

47 голосов
/ 15 марта 2011

Я строю систему меню, представленную пользователю в многоколоночном формате. Свойство column-count в CSS3 дает мне 90% пути, но у меня возникают трудности с выравниванием в Chrome.

Меню относительно простое:

  • неупорядоченный список, разделенный на несколько столбцов свойством count-count
  • столбцы должны заполняться последовательно, поэтому column-fill: auto
  • пункты меню представлены в виде пунктов списка
  • каждый элемент списка имеет кликабельный тег, полностью расширяемый с помощью display: block

Проблема выравнивания, которая у меня возникла, наиболее заметна с верхней границей и некоторой окраской фона для каждого элемента списка. В Firefox элементы списка всегда четко выровнены по каждому столбцу, никогда не переходя в предыдущий / следующий столбец. В Chrome выравнивание - это грандиозный выстрел, который зависит от количества элементов списка и любых свойств отступов / полей.

Я разместил код для простого теста здесь: http://pastebin.com/Ede3JwdG

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

Я попытался изменить отступы / поля для элементов списка, но безрезультатно: в Chrome, как представляется, имеется некорректный алгоритм передачи содержимого по многостолбцовой компоновке.

Основная причина, по которой я не полностью исключил подсчет столбцов (в пользу генерации вручную / Columnizer / и т. Д.), Заключается в том, что система меню также включает в себя функцию перетаскивания и перетаскивания через несколько подменю и наличие меню данные, представленные в виде сплоченной иерархии на основе списков, создают чистый код.

Есть ли способ исправить проблему с выравниванием в Chrome, или я должен просто сейчас отказаться от count-count ?

ДОБАВЛЕНО:

Ответы [ 9 ]

54 голосов
/ 20 февраля 2017

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

Кроме того, для каждого элемента можно указать width: 100%, чтобы они использовали всю ширину строк.

Вот рабочий пример: 

$(document).ready(function() {
    for( var i = 0; i < 24; i++ ) {
        $("ul.newslist").append("<li><a href='#'>Item</a></li>");
    }
    $("ul.newslist > li").click(function() {
        $(this).remove();
    })
});
ul.newslist {
    columns: 5;
    background-color: #ccc;
    padding: 16px 0;
    list-style: none;
}

ul.newslist > li {
    display: inline-block;
    width: 100%;
    border-top: 1px solid #000;
}

ul.newslist > li > a {
    display: block;
    padding: 4px;
    background-color: #f6b;
    text-decoration: none;
    color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="newslist"></ul>
19 голосов
/ 06 марта 2012

Мне удалось сбалансировать неровные вертикально выровненные столбцы, применив свойства margin-* к элементам внутри многоколоночного контейнера. 

.content {
  column-width: 15em; /* or could be column-count, however you want to set up multi columns */
}
.content > section {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}
16 голосов
/ 15 марта 2011

Я также поиграл, и несколько источников, которые я видел онлайн, делают это, кажется, известной проблемой с webkit. Хорошую разбивку можно найти здесь: http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/

Когда-нибудь, CSS 3!

Может быть, попробовать плагин jQuery, как http://welcome.totheinter.net/columnizer-jquery-plugin/?

13 голосов
/ 12 октября 2015

Что касается утечки вертикальных полей.Вы можете заменить поле псевдоэлементом.Затем установите его высоту на желаемое значение поля.Вам также нужно установить -webkit-column-break-inside: avoid; для элемента, содержащего псевдоэлемент, чтобы он не перемещался в другой столбец.Делайте это только для webkit с помощью css-hack (не рекомендуется) или js-detection (лучший способ).Вот CSS: 

.element {
  -webkit-column-break-inside: avoid;
}
.element:after {
  content: '';
  display: block;
  height: 20px;
}
6 голосов
/ 14 марта 2015

У меня были проблемы с вертикальным выравниванием в списке из нескольких столбцов. Оказалось, что проблема была в том, что я использовал нижний отступ в моем списке li - я изменил стиль li, чтобы вместо него использовать нижнее поле, и столбцы снова выровнялись по верху.

2 голосов
/ 20 декабря 2016

Я решил эту проблему, удалив вертикальные поля на дочерних элементах, а затем увеличив высоту строки дочерних элементов, чтобы воспроизвести желаемый интервал.

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

1 голос
/ 18 ноября 2016

Мой желаемый результат - получить большой список ссылок для отображения в 3 столбцах.Простое использование только column-break-inside:avoid; не сработало в веб-наборе.

HTML 

<div class="links">
  <ol>
    <li><a>link</a></li> <!-- x 50 -->
  </ol>
</div>

css: 

.links ol {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

.links li {
  display: block;
  border: 1px solid $background-colour; //to appear invisible
  -moz-column-break-inside:avoid;
  -webkit-column-break-inside:avoid;
  column-break-inside:avoid;
}

.links a {
  display: block;
  margin-bottom: 10px;
}

Решение (извините, если хотите)

Я добавил рамку размером в 1 пиксель вокруг элементов списка, которые, казалось, содержали поля его дочерних элементов, и каждый столбец затем выровнялся по верху.

Редактировать: Это кажется обязательным, если вы используете глобальный border-box

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
0 голосов
/ 20 июля 2017

это решение проблемы многоколоночного пространства 

ul li { line-height:40px; }
0 голосов
/ 26 октября 2016

Я также борюсь с этим, для системы отчетов с большим количеством данных и заголовков с отступом / полем, которые мне нужно распределить по нескольким столбцам для более широких экранов.

Я работал над своимпервый значительный сдвиг, заполнение начального элемента title псевдоклассом :first-child (это включено в правило @media для широкоформатных экранов, которые здесь не показаны):

Определение столбцов: 

.dimSlider .multicol {
  -moz-columns: 4;
  -webkit-columns: 4;
  columns: 4;
}

Отмена заполнения сверху при .multicol

.dimSlider .multicol h3 {
  padding-top: 0;
}

Отмена заполнения и поля для первого элемента (color: blue;, чтобы я мог видеть, ловит ли правило правило): 

.dimSlider .multicol .criteria:first-child h3 {
  padding: 0 2%;
  margin: 0;
  color: blue;
}

Пока что это выглядит намного лучше в моем Firefox.Я посмотрю, не придется ли еще что-то переделать, но в настоящее время в Firefox текст выглядит выровненным сверху, что является наиболее важным.

РЕДАКТИРОВАТЬ: проблема кажется довольно серьезной с браузерами на основе webkit.Чтобы полностью решить эту проблему, я изменил шаблон, чтобы иметь <div></div> вокруг всех названных разделов, чтобы я мог добавить отступы / поля в конце элементов div, а не в начале заголовков.Теперь в браузерах webkit это тоже выглядит хорошо.

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

Но самая большая трудность заключается в том, что Firefox не поддерживает свойство column-span или break-inside, поэтому, когда у меня очень мало контента, онтем не менее, распределен по столбцам, как одна или две строки на каждом.Опять же, Smarty на помощь: 

{if $element|@count <= 10}
<div class="nocol"> 
{/if}

Пока у меня все работает ...

...