问题标签 [css-multicolumn-layout]

我有一大段文本流入 CSS 多列布局，例如使用CSS 连字符拉伸两列、三列或四列。在某些时候，需要提前结束某一列的文本，以便让段落的其余部分从第二列的顶部开始。

有什么方法可以简单地设置 a<column-break>以在下一列的顶部开始其余文本？

目前我正在用很多<br>s 填充列（需要分栏符）以延长 HTML 中的列以达到效果。

此外，每当任一列中的某些内容发生变化时，<br>填充量就会不足，需要重新评估。

请参阅我的 JSFiddle。

有什么方法可以优雅地“结束”第一列并告诉浏览器开始下一列中的其余内容？

图像可以在列内缩放为column-heightand column-width，使用 CSSmax-width和max-height属性。但是当图像被放置在<figure>标签内时，max-width似乎工作正常，但max-height失败了^[1]。

我在这个小提琴^[2]中演示了它。示例 4 显示了正确的行为，示例 3 在不同的浏览器中不一致地失败。什么是适当的解决方法？

^[1]在 Firefox 中，它overflow-y: scroll在整个包含div. Chrome Canary 将图像按比例显示为max-width几列的分解图。在 Safari 9 中，它确实显示了所需的结果。

^[2]有关该问题的代码摘录：

我有一个基于 CSS 的 2 列布局...

有时，第二列的顶部会捕获上一段底部的边距。如附图所示，这会推动下一段的顶部。我尝试过闯入，改变边距，内联块。所有人都取得了一些成功，但不是最佳的。我可以访问第二列以删除该边距吗？

我正在使用 CSS 列，例如：

HTML：

CSS：

但是，我希望我的列在使用时具有不同的宽度column-width。

这有可能吗？我想也没有办法使用百分比？

我正在尝试设置一个弹出菜单的样式，该菜单在悬停时显示子菜单，弹出到悬停项目的右侧。我的主要项目使用 分成两列column-count，这就是痛苦开始的地方。

在 Firefox 中，一切都按预期运行：子菜单会在悬停项目所在的位置弹出。在 Chrome 中，子菜单相对于最左边的列弹出。

四个案例（悬停的项目 3 和 9，Firefox 和 Chrome）显示在附加的屏幕中。在 Firefox 和 Chrome 中尝试演示以了解我的意思。

有没有一个巧妙的解决方案？我尝试了列跨度，但这不起作用。我无法使项目li相对，因为我希望弹出窗口填充整个高度。

http://jsfiddle.net/cfckw5jz/6/

我希望我的列的最左边和最右边的边距与它们之间的空间相同。我认为我的代码笔很好地展示了它。以防万一不清楚，

我希望用红色标记的红色间隙都相同，而不是它们现在的样子。

这是我基于此的代码：

我在使用 Safari（9.0.1）并在多列上显示文本时遇到问题：它只是将行水平（！）分开，以便上升线保留在前一行（底部）中，其余字母显示在新列的顶部（见随附的屏幕截图）。这种行为使列功能基本上无用。同时 Firefox (42.0) 和 Chrome (47.0.2526.80) 完全可以使用 CSS。

这是 Safari 特有的问题，是我做错了什么还是我的系统出了问题？

并且（另外）：Webkit-browser 计算不同是否正常？在 1280px 宽的显示器上，Firefox 最多显示 4 列（4x (300px + 2x 10px)），而 Webkit 浏览器坚持 3 列（当将列宽减小到 296px 时，它们确实显示 4 列，尽管这只是总结到 1264 像素）。

编辑：我添加了整个文本的另一个屏幕截图，该屏幕截图分布在不同的列中，并添加了问题的标记。

细节

整体展示

我将 CSS3 多列布局用于有序列表，但单个列表项的列表编号未显示在第二列中。

这是JSFiddle。

示例代码如下。

HTML

和 CSS：

我正在处理 5 列，但里面的元素被破坏了。我试图解决这个问题，但我没有运气。

链接：http ://bit.ly/1NDAnQA

CSS：

HTML：

我正在使用 CSS3 列

我的 html 看起来像这样。

我通过 Chrome 开发工具检查了我的 iPad 和 iPhone 显示，它工作正常。但是，真正的 iPad 和 iPhone 没有显示任何内容。我该如何解决这个问题？