问题标签 [column-count]

我column-count: 3用来将列表分为三列，并为每个列表项设置样式，display: inline-block以将列表项的子项保持在同一列中。max-height孩子们用和隐藏overflow: hidden。

我想通过设置展开并在点击时显示子max-height: none项，但是由于 column-count 试图动态地平衡所有列，因此列表会重新排序。我知道这就是 column-count 的用途。

我想在页面加载后使用类似于column-count: 3但“锁定”它的东西，这样它在展开子项时不会重新排序。如果不将项目分成三个不同的列表，这是否可行？唯一的要求是它可以在 IE11 上运行。

这是我的codepen演示来说明问题。

我想动态地将项目添加到列表中，当我这样做时，顺序很奇怪，当我添加第一个项目时，这个粘在左边，当我添加第二个时，这个到中心，第三个项目去 rigth，到目前为止一切都很好，但是，当我添加第四个元素时，我得到了 2 列而不是 3 列。

这就是我要的

这就是我得到的

我确实需要使用列数（因为我需要在填充 9 个元素时水平滚动列表，因此，元素编号 10 将超出屏幕并出现水平滚动）。

知道如何实现这一目标吗？

我正在尝试使用列数为用户任务制作一种周历。

本周的主要 div 具有 column-count 为 7 的属性，并且总是会有 7 个孩子。本周的第 7 天。这几天有任务，但任务的数量是可变的，它打破了列计数逻辑。

为什么 column-count 不考虑其中的第一个孩子？

这是我所说的一个例子：https ://jsfiddle.net/nby5ctb2/

在第二个列表中，我希望任务 1、1.1 和 1.2 相互叠加，如果没有孩子，就跳过这些日子。

我使用的css就是这样的：

感谢先进

有column-count，但我想知道 CSS 列中的项目是否有“项目计数”之类的东西？我在尝试在我的 3 Column FAQs 中保持固定的项目数量而不指定列本身的高度时遇到了麻烦。

在此示例中，我希望每列有 3 个项目，无论每个项目中的问题或答案有多长。在实际站点中，我不知道项目的确切数量，所以我只想让它们保持“平衡”。

您可以看到我尝试使用 flexbox，但答案面板将包含动态内容（问题/项目的数量也是如此）。我的目标是在显示答案面板时让它看起来像砖石布局。

有什么方法可以为用 制作的列添加不同的样式column-count吗？我有一个div使用column-count. 一次只有两列在页面上可见。我需要添加margin-left到第一列和margin-right第二列，依此类推。

我需要的是页面两侧（外侧和内侧）的间距相同，就像书一样。

这是用于测试链接的 JSFiddle

问题

使用 CSS column-property 在页面上创建列我注意到布局引擎的一些奇怪行为。即，我正在使用

所以每列应该是 308px 宽。我的演示页面看起来非常正常，除了以大约 2400 像素宽度查看时。然后它看起来像这样：

请注意最后一列中的大黑色空间。我的数学告诉我 2400 / 308 = 7.79 > 7。人们会期望在 2400px 视口宽度处出现七列。然而，布局引擎只使用了六个。这种行为在 chrome 和 firefox 之间是一致的，甚至在替换column-width: 308px为column-count: 7.

问题

我想知道是什么导致浏览器在这个宽度上忽略第 7 列。有没有办法避免这种行为？

编码

可以使用以下源或此小提琴重现该问题

所以我在 Safari 中发现了这个错误，但找不到修复它的解决方案。

所以左侧是完全可点击的，但右侧不是因为元素实际上不在右侧。

此图像显示了悬停应位于右侧的元素时出现的问题

我使用了 CSS3 多列功能，使用column-count属性拆分为多列。

这是我的代码：

它不适用于我的 Firefox 版本或 Firefox 开发者版。该代码正在运行：Google Chrome、Opera 和 Microsoft Edge。

这是一个错误还是有任何解决方案？

考虑以下示例：https ://codepen.io/anon/pen/OOrMLm

每个白色块都可以单击，它会显示一个小的红色弹出窗口，我需要用户在其中做出一些选择。

在 Firefox 上，一切似乎都运行良好（如果我display:inline-block;在白色元素上使用），但在 Chrome 和 Safari 上，这些行为有点奇怪。

这两个错误如下：

• position:absolute显示位于右侧的红色弹出窗口似乎会影响列中的流量（蓝色块扩展），而在 Firefox 中则不会（这是我想要的）
• 在与第二个蓝色 div 重叠的红色弹出窗口内单击不会被捕获为弹出窗口内的单击（似乎弹出窗口以某种方式位于第二个蓝色 div 的“下方”）。

我玩过强迫z-index和transform: translateZ()但没有运气。它似乎display: flow-root;对 Chrome 有点帮助，但我无法让它完全工作。

关于如何在 Chrome 和 Safari 中解决此问题的任何想法？

我在任何地方都找不到相同的场景，我已经在这上面浪费了过多的时间。

我正在尝试实现一个普通的 webkit 列，其中元素在 y 方向上是可点击/可扩展的。

我画了这张图来解释我的意思：

问题是，当我展开一个元素时，列元素会重新排列，以便所有列再次变为相同的高度，这会弄乱整个视图。

有没有人遇到过这个问题？我试图在不依赖 jquery 的情况下解决这个问题，因为这是一个 React.js 应用程序，我试图不将两者混合。

CSS：

其中 in-columns-small 是包含 div 的较大正方形