问题标签 [column-count]

我正在使用 column-count 和 -webkit-column-count 创建一个布局，但我发现了一个多次出现的问题。

从这张图片可以看出，Chrome 45（FF 中没有）打破了元素的边界，这很奇怪也很烦人。这是发生中断的代码（但我不知道为什么这里没有发生，唯一的区别是字体，并且没有 Mayers css reset）：

但它没有用。能给点启示吗？

我有一个包含三个垂直 div 的 div。在这些内部 div 中有具有 column-count CSS 属性的 div（效果很好，见下文）。

工作部分是这个（对于多个屏幕尺寸）作为一个例子：

有人可以告诉我为什么当我尝试打印页面时以下代码不起作用？

@media 打印查询正在使用

例如。

我在 Mac OS X 上尝试了 Safari 和 FF。

谢谢！

I had made one highchart in that tooltip is shows date and time in format but it is showing wrong date and time.

Please go through the code below.

HTML Code

Javascript Code

The working fiddle is given here.

我在 Chrome 中遇到问题，column-count列底部的列表项的下降部分被截断并出现在下一列的顶部。请看下面这张图片：

请注意“斯洛文尼亚”上方的最右侧列

最右列顶部的那条小线是斯洛伐克共和国“p”衬线的结尾。这只是 Chrome 上的一个问题，在 Firefox 中，最后一项实际上是倒数第二列中的“斯洛文尼亚”。更改为不同的衬线字体或无衬线字体也不能解决问题（实际上更明显）。

break-inside: avoid-column;当应用于列表项并不能解决问题时，-webkit-column-break-inside: avoid;. 我可能没有将它应用于正确的元素？当然，非javascript解决方案将是首选。

我使用“column-count 3”将视频（in）放入 3 列布局。每次当我在顶部的第二个或第三个视频上点击播放按钮时，它都会跳到上一列的底部。它只发生在 Chrome 中。在 Firefox 中，它正如预期的那样完美。

我尝试应用有关我在 StackOverflow 上找到的类似问题的所有提示，但是，它们都不适合我（包括将 translate 属性添加到包装容器）。你能帮我解决这个问题吗？

这是我的代码（玉）：

我绝对不能去任何固定的高度或宽度，因为我需要它灵活，同时调整大小+保持正确的纵横比。因此，应尽可能减少应用的更改。先感谢您！

我正在开发一个摄影作品集网站，该网站column-count用于创建 3x3 的图片网格（适用于大多数分辨率）。我的 div 设置如下：

这是 div 的 css，减去我的页眉和页脚：

问题是我在最后一行图片之后留下了一个大的空白区域。在 Chrome 中检查元素表明它是photo-containerdiv 的一部分。这是这样的：

照片容器 div 中的空白

添加overflow:hidden到photodiv 可以消除空白；但是，caption中间列和右列的 div 被隐藏：

空白消失了，但隐藏了一些字幕

也许我在设置设计的方式上存在严重缺陷，但如果可能的话，我希望空白区域消失并显示所有标题。

提前感谢您的帮助。

我有一个包含 20 个字段的配方表，通过一个表格，我已经填写了 19 个。但是出现插入失败错误 - “列数与第 1 行的值计数不匹配”。我没有填写的唯一一列是自动增量主键值（我猜应该自己处理），所以我不确定为什么会发生这个错误。将不胜感激任何帮助。

这是php：

这是完整的错误消息：

INSERT failed: INSERT INTO recipes VALUES('Assam', '2000-12-12 00:00:00', 'Wingnuts', '最好的吃掉你心脏的方法', 'Walia', 'firstfood.jpg', 'images/firstfood.jpg', 'image/jpeg', '水\r\npaper\r\nnuts\r\nbarberries\r\n竹笋', 'Wash', '彻底清洗\r\n拍干', '干炒'、'在煎锅上加热\r\n加香料\r\n放凉'、'加水'、'放入雨水中\r\n搅拌'、'盐'、'加喜马拉雅海盐'、'唱歌', '举起盘子\r\n唱得好') 列数与第 1 行的值数不匹配

这是表结构：

我正在使用默认编号创建一个有序列表。该列表将超过 300 个。我使用 css-column-count 将列表划分为列，但默认列表编号仅存在于第一列。

有没有办法在多列中获取整个列表的编号。

请检查FIDDLE

我正在尝试在我的fixed/absolute定位下拉导航中使用 CSS 列。我想指定columns-width和下拉列表max-height，让浏览器根据需要自动填充尽可能多的列。但由于某种原因，该UL元素无法正确调整其列的总宽度。

我在演示中添加了两个小按钮，它应该模拟我预期的行为。

使用时column-count，它似乎会裁剪任何溢出内容。

结果：

有什么想法可以解决这个问题吗？

编辑1：

这似乎是Chrome中的一个错误。

虽然在 Firefox 上很好：

编辑2：