Столбцы CSS3 обрезают лилии

Я пытаюсь использовать столбцы css3 со списком (<li>). У меня проблемы с его работой.

Я определил div, который обертывает <ul>

div.ul-container {
  -moz-column-width: 310px;
  -moz-column-gap: 10px;
  -webkit-column-width: 310px;
  -webkit-column-gap: 10px;
  column-width: 310px;
  column-gap: 10px;
}

Это отлично работает, когда у меня есть три <li> или выше. Но когда у меня меньше этого (2 или 1), кажется, что <li> обрезается. Я попытался определить min-height, но это тоже не сработало (он рассматривал его как высоту).

снимок экрана:

отрезание ли

есть идеи?


html css multiple-columns
person Guy    schedule 12.08.2012    source источник
comment
можете ли вы показать нам демо на jsfiddle.net   -  person Alfred    schedule 12.08.2012
comment
jsfiddle.net/nZUB9 попробуйте поиграть с шириной HTML-фрейма, и вы увидите неожиданное поведение.   -  person Guy    schedule 12.08.2012

Ответы (2)


arrow_upward
22
arrow_downward

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

li {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

Дополнительная информация о CSS-трюках

Надеюсь, это поможет любому в той же лодке!

person Lucía Amado    schedule 03.11.2015
comment
это не исправило это для меня. в Хроме 57.0 - person ekkis; 25.04.2017
comment
@ekkis Вы случайно поставили правила на ul вместо li? Я сделал эту ошибку.. - person Simon Lenz; 22.06.2018

arrow_upward
0
arrow_downward

Кажется, это связано с полями на элементах li и ol. С сайта jsfiddle.net/nZUB9 я сначала сбросил ваш CSS, а затем превратил margin: 6px 0; в padding: 6px 0; Это сделало работу для меня ;)

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


* {
margin: 0;
padding: 0;
font-family: arial, verdana;
}

.task-wrapper {
-moz-column-width: 310px;
-moz-column-gap: 10px;
-webkit-column-width: 310px;
-webkit-column-gap: 10px;
column-width: 310px;
column-gap: 10px;
    border:1px solid red;
}

ol.tasks {
list-style-type: none;
margin-left: 0;
    display: block;
}

ol.tasks li {
border-bottom: 1px dotted rgba(0, 30, 30, 0.3);
background-color: white;
background-color: rgba(255, 255, 255, 0.9);
}

ol.tasks li {
border: 1px solid rgba(0, 30, 30, 0.3);
padding: 6px 0;
list-style-type: decimal;
width: 310px;
}
person Antoine    schedule 12.08.2012
comment
кажется, что даже с заполнением он обрывается, когда вы играете с шириной окна HTML: (проверено на хроме) jsfiddle. сеть/nZUB9/1 - person Guy; 12.08.2012
comment
Я удалил максимум кода, чтобы определить проблему. Кажется, он работает лучше, за исключением последнего элемента li, который исчезает, когда я изменяю размер области просмотра до минимальной ширины... не очень хорошо... jsfiddle.net/nZUB9/2 - person Antoine; 12.08.2012
comment
интересно, в чем проблема. это может быть ошибка браузера, нет? интересно, есть ли обходной путь. по поводу упрощенной версии - к сожалению моя ‹li› не простая ;-) - person Guy; 12.08.2012
comment
я видел это;) как вы сказали, может быть, это связано с ранней реализацией. Но я понимаю, что вы хотите попробовать ^^. Пробовали ли вы использовать другие типы элементов (например, div)? - person Antoine; 12.08.2012
comment
кстати, возможно, вы можете использовать что-то вроде jquery.masonry для достижения этой цели. Он довольно хорошо имитирует структуру столбцов - person Antoine; 12.08.2012