问题标签 [column-count]

我正在尝试使用 css3 rule 在 8 列中显示项目column-count。但是，有时显示 6，有时显示 7。我尝试为项目设置特定宽度，但似乎没有任何效果。

点击这里查看小提琴

我有一个使用 HTML 和 CSS 的 2 列布局。在这些列中，我有一个选择菜单，当单击这些列表项之一时将显示该菜单。我需要相对于单击的项目定位此选择菜单，并且不影响其周围元素的布局，就像传统的选择选项菜单一样。但是，我不能使用传统的选择，因为这是一个自动提示输入/菜单。因此，我在其相对定位的父项中为菜单容器使用了绝对定位的项。

我想要的是：

我的问题是绝对定位的项目正在破坏，就好像它是列的一部分一样。这违背了我所了解的一切position: absolute，但它似乎在规范之内。更郁闷的是，浏览器按我的意愿显示绝对定位项（只要我不设置position: relative在父项上），但我需要设置position: relative在父项上，或者选择菜单（作为绝对定位项）不会总是显示相邻的相应元素。

我得到什么：

我还尝试了使用 flexbox 的类似列的布局，但是这样，项目从左到右显示，当我需要它们按顺序从上到下显示时，就像在传统的列式布局中一样。我可以将 flexbox 与 一起使用flex-flow: column wrap，但这需要我知道/设置容器元素的高度，这是我做不到的。CSS 列很好地包裹了列表，而无需设置高度。

我认为最简单的解决方案是以某种方式伪造绝对定位或让 flexbox 按顺序（从上到下）显示项目，而无需在容器上明确设置高度。这两种我都试过了，都没有令人满意的结果。我对使用 JavaScript 解决方案持开放态度，但我正在尽力避免它并仅使用 CSS 解决这个问题。

这是一个带有示例的代码笔，显示了我的问题。从 HTML 中删除父类以查看预期的绝对定位项（请注意，这有时会导致定位不正确）。

这是我在我的网站上遇到的一个问题，我在 js fiddle 上重新创建了这个问题，我正在尝试使用具有均匀宽度的部分标签创建 5 列，使用列数，这在 chrome/firefox/edge 上工作正常，但是在 Internet 上explorer 11 它被忽略并将部分显示为块。

我读到 IE 应该支持列数，所以它为什么被忽略非常令人困惑，这是一个错误还是我做错了什么？我的小提琴在下面

https://jsfiddle.net/gqdL46j4/

html

css

我正在尝试将 css 'column-count' 与 CSS 填充结合使用，并且我观察到如果我指定列数为 3，如果内容不合适，浏览器将呈现第四列的一部分。如下所示

这是一个 JSFidle -> https://jsfiddle.net/w40jcykp/1/

我在 Chrome 和 Edge 中看到了这一点。这是一个已知问题，还是有解决方法？

非常感谢你。

下面的 CSS。

我想制作一个 HTML 文档，其中包含一个模拟\itemize乳胶环境的数学公式列表（即标记应该像“1）、2）等”）并且我想要一个两列布局。

对于数学公式，我使用 MathJax，对于标记，我在https://stackoverflow.com/a/1636635/3025740使用 CSS 技巧，对于两列，我使用 CSS 属性column-count添加特定于供应商的属性，如http:// www.w3schools.com/cssref/css3_pr_column-count.asp

这三种机制中的任何两种似乎都可以正常工作，但是当我混合使用这三种机制时，它就不行了：数学公式的字体大小（回忆，用 MathJax 渲染）太小了。

这是重现问题的最小代码（在 Ubuntu 16.04 LTS 和 Firefox 49.0.2 上测试）

position: relative;如在CSS中删除的片段所示，ol > li修复了 MathJax 大小问题。可悲的是，它也打破了标记技巧（标记消失）

知道如何进行这项工作吗？

我正在使用 css 列（不是表）来创建一个跨越 3 列的列表，如下所示：

HTML

CSS

它是如何显示的

但是，所有列的宽度都相同，这会导致它们之间的间距不同。如何调整 css 列以获得这样的结果，其中每列的宽度取决于内容？

我想要达到的目标：

谢谢！

编辑：我应该提到我需要使用 CSS 列，因为这些项目列表是通过 CMS 动态生成的，所以如果可能的话，我想找到一个纯 CSS 解决方案，以避免引入 Javascript 来操作 DOM。谢谢你。

我有一个分成 4 列的文本，它在 Safari 中完美运行我不知道为什么我在 Google Chrome 中只能看到 2 列。

使用 Chrome 55.0.2883.95（64 位）测试

任何帮助将不胜感激。

我在使用该column-count属性时遇到了 Chrome 问题。我有一个 div，里面有一些项目，所以我设置了column-count: 3; 当我有 3 个或更多项目时，它工作得很好，但是当我只有两个时，它们不会显示在同一行而是在同一列中。这只发生在 Chrome 上。

代码示例：

我正在创建一个与 MySQL 数据库连接的 Java 程序。我想在 MySQL 中创建一个表，该表限制为 10 个输入或 10 个插入语句。有人可以帮我解决这个问题吗？

我在设置文本的顶部位置时遇到问题。主 div 带有“column-count:2”，里面有一些文本分布在两列中。文本分为不同的标签，称为“sen”。还有一些文本用某些类突出显示。现在我需要找到分布在两列中的突出显示文本的顶部位置但它给了我错误的位置值，即第二列中的顶部位置，即 0

这是获得清晰想法的小提琴链接： https ://jsfiddle.net/trupti11/1gt0bf54/