CSS многоколоночное расположение элементов списка неправильно выравнивается в Chrome

Ответ 1

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

Ответ 2

Мне удалось сбалансировать неравномерные вертикально выровненные столбцы, применив свойства 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;
}

Ответ 3

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

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

Возможно, попробуйте плагин jQuery, например http://welcome.totheinter.net/columnizer-jquery-plugin/?

Ответ 4

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

.element {
  -webkit-column-break-inside: avoid;
}
.element:after {
  content: '';
  display: block;
  height: 20px;
}

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

Я работал над своим первым крупным разворотом, дополнением исходного элемента заголовка, с псевдоклассом :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 текст выглядит выравнивается сверху, что самое главное.

ИЗМЕНИТЬ: Проблема, по-видимому, в браузерах на основе веб-китов выглядит еще хуже. Чтобы полностью решить проблему, я изменил шаблон, чтобы иметь <div></div> вокруг всех титульных разделов, чтобы я мог добавлять отступы /margin в конце div, а не в начале названий. Теперь в браузерах webkit это тоже выглядит отлично.

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

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

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

Пока это работает сейчас для меня...

Ответ 8

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

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;
}

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

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

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

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Ответ 9

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

ul li { line-height:40px; }