不规则列表布局css3,CSS3-列表项的CSS多列布局在Chrome中无法正确对齐
CSS3-列表项的CSS多列布局在Chrome中无法正确对齐
我正在构建以多列格式呈现给用户的菜单系统。 CSS3中的column-count属性使我获得了90％的访问权限，但是在Chrome下对齐时遇到了困难。
菜单相对简单：
按column-count属性分为多列的无序列表
列应按顺序填充，因此column-fill：auto
菜单项表示为列表项
每个列表项都有一个可点击的锚标记，并通过display：block完全扩展
我遇到的对齐问题在每个列表项的顶部边框和某些背景色上最明显。 在Firefox中，列表项始终在每一列中保持整齐对齐，而不会渗入上一列/下一列。 在Chrome中，对齐方式很简单，随列表项的数量和填充/边距属性的不同而不同。
我在这里发布了一个简单测试用例的代码：[http://pastebin.com/Ede3JwdG]
该问题应该立即显而易见：在Chrome浏览器中，第二列中的第一个列表项会渗回到第一列中。 删除列表项(单击它们)时，可以看到对齐方式进一步细分。
我尝试了对列表项的填充/边距进行调整，但无济于事：Chrome似乎在算法如何在多列布局中分配内容方面存在缺陷。
我没有完全放弃列数(主要是手动生成/ Columnizer /等等)的主要原因是菜单系统还涉及跨多个子菜单的拖放功能，并且布局了菜单数据 因为基于内聚列表的层次结构可以产生干净的代码。
有没有办法解决Chrome中的对齐问题，还是我现在应该只放弃列数？
添加：
jsFiddle原型：[http://jsfiddle.net/VXsAU/]
JS Bin原型：[http://jsbin.com/ebode5/]
9个解决方案
60 votes
您需要将列中的每个项目都显示为“行内块”。 这将解决您的问题，而无需使用jQuery。
此外，可以指定每个元素具有width: 100%，以使它们使用行的整个宽度。
这是一个工作示例：
asiby answered 2020-02-11T10:22:29Z
19 votes
通过对多列容器中的元素应用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;
}
kmerc answered 2020-02-11T10:22:50Z
16 votes
我也玩过，而且我在网上看到的一些资料也使它成为webkit的已知问题。 可以在这里找到很好的细分：[http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/]
有一天，CSS 3！
也许尝试像[http://welcome.totheinter.net/columnizer-jquery-plugin/]这样的jQuery插件？
Jack Lawson answered 2020-02-11T10:23:19Z
13 votes
至于垂直边距泄漏。 您可以用伪元素替换margin。 然后将其高度设置为所需的边距值。 您还需要在包含伪元素的元素上设置-webkit-column-break-inside: avoid;，以使其不会移动到另一列。 仅在css-hack(不推荐)或js-detection(最佳方法)的帮助下对webkit执行此操作。 这是CSS：
.element {
-webkit-column-break-inside: avoid;
}
.element:after {
content: '';
display: block;
height: 20px;
}
Andrey answered 2020-02-11T10:23:40Z
6 votes
我在多列列表上进行垂直对齐时遇到麻烦。 事实证明，问题在于我在列表li的列表上使用了底部填充-我将li样式更改为使用底部边距，而列又重新对齐了顶部。
Julie Olson answered 2020-02-11T10:24:00Z
2 votes
通过消除子元素的垂直边距，然后增加子元素的行高以复制所需的间距，我解决了这一问题。
我还注意到，我可以通过删除子页边距并将其转换为孙填充来解决此垂直对齐问题。
Eleanor Zimmermann answered 2020-02-11T10:24:24Z
1 votes
我想要的结果是希望获得大量的链接列表，以显示在3列中。 在webkit中，仅单独使用border-box无效。
的HTML
- link
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;
}
解决方案(可能会出现的问题)
我在列表项周围添加了一个1px的边框，该边框似乎包含其子项的边距，然后每一列都与顶部对齐。
编辑：这似乎仅在您使用全局border-box时才需要
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Kiee answered 2020-02-11T10:25:06Z
0 votes
对于带有许多数据和标题(带有填充/边距)的报表系统，我也需要为此而苦苦挣扎，我需要在多列上使用这些字段来填充更宽的屏幕。
我已经使用2742722859553553522688伪类(这是宽屏的@media规则中包括的内容)解决了我的第一个大难题-初始title元素的填充(此处未显示)：
列定义：
.dimSlider .multicol {
-moz-columns: 4;
-webkit-columns: 4;
columns: 4;
}
在
.dimSlider .multicol h3 {
padding-top: 0;
}
取消第一个元素的填充和边距(
.dimSlider .multicol .criteria:first-child h3 {
padding: 0 2%;
margin: 0;
color: blue;
}
到目前为止，这在我的Firefox中看起来更加整洁。 我将看看是否还有其他工作要做，但目前在Firefox中，文字看起来在顶部对齐，这是最重要的。
编辑：实际上，基于Webkit的浏览器的问题似乎更加严重。 为了完全解决它，我修改了模板，以便在所有标题部分周围具有
顺便说一句，在多列中使用百分比测量非常棘手，因为该百分比似乎是根据列的宽度而不是父元素的全局宽度计算的。 我通过在列的父元素中添加填充来更改此设置。
但是最大的困难是Firefox不支持任何列跨度或闯入属性，因此当我的内容很少时，它仍然散布在列上，就像每行上一行或两行一样。 再次，Smarty进行了救援：
{if $element|@count <= 10}
{/if}
到目前为止，它现在对我有效...
Joel.O answered 2020-02-11T10:26:08Z
-2 votes
这是多列空间问题的解决方案
ul li { line-height:40px; }
Swati answered 2020-02-11T10:26:28Z