问题标签 [column-count]

我在 div 中显示大量表格。我使用 CSS column-count 将此 div 划分为列。

但是，由于基线，它正在扩大单元格以与彼此相邻的表格对齐。指定高度，即使使用 !important 似乎也被忽略了。

我怎样才能防止这种行为？

更新1：

包含在 div 中的 HTML 示例表 (id="data")

CSS

概括

我正在使用column-countCSS 属性来实现像 pinterest 这样的布局设计。但是因为column-count如果我放了一个 Youtube Embed <iframe>，这个 iframe 就会消失。你能告诉我为什么它会消失吗？

细节

我按照此示例进行网格布局。它运作良好。但是当我把 Youtube video iframe 改为 if<img>时，它在开始播放时就消失了。这是我的代码中的一个示例（我没有放置所有样式，因此您不会混淆）。如您所见，它在视频开始播放时消失了。但是当我*-column-count从 css 中删除行时，它正在工作。但这一次我正在失去Pinterest 风格。

我有一个关于在 CSS 列中使用绝对定位的 div 的问题。基本上，我有一个菜单系统，它使用应用了计数 2 的无组织列表。在 li 元素之一悬停时，我希望出现一个绝对定位的 div - 它确实如此。但它似乎与第二列重叠，使其无法使用。在此处查看屏幕截图：http: //i.stack.imgur.com/PYuUE.png

您可以在开发人员工具中看到突出显示的淡蓝色元素是我需要看到的。我试过z-index，但它似乎在这里不起作用，所以我想知道这是否是一些奇怪的列行为？

提前致谢

我有一个无序列表，它动态地填充了从 1 到任何东西的列表项。此列表使用列数设置为列的样式。如果列表中有 3 个或更多项目，一切都很好。但是当有两个或只有一个项目时，我想将它们放在中间。

HTML：

CSS：

演示：http ://codepen.io/anon/pen/NPBKBd

这是一张图片：

问题是，在 chrome 中，在最低的蓝色框的底部和容器的底部之间添加了额外的空间。到目前为止，找不到解决此问题的方法。在 Firefox 中运行良好。

有任何想法吗？

https://jsfiddle.net/t8nkpkm7/

在包装器中使用column-count时，包装器中的容器已border-radius应用，并且容器中的内容溢出，内容在所有列中完全消失，除了第一个列。

这是我的例子：https ://jsfiddle.net/f4nd7tta/
红色的半圆只在第一列可见，为什么？

我正在使用这个 css 代码来管理页面中的列（我在 wordpress 4.2.2 + Visual Composer 插件上）：

它在 Firefox 上运行良好，但整个段落在 Chrome 和 Safari (webkit) 上消失了。有什么建议吗？

编辑：我无法添加任何屏幕截图（我需要至少 10 个声誉 ti 发布图片），所以有网站 链接

I'm using some column property to list some items in three columns. but there is a problem on safari only :

when I use border-radius property on it, the text inside columns 2 and 3 disapear.

here a codepen link : http://codepen.io/arokh/pen/zGyyKx

so if you set border-radius: 5px; to 0 in line 54; you'll see the text again...

Any idea to use border radius property and see the text ?

早上好，我需要在 3 列布局上有一个“pinterest”样式的页面。每列将相互匹配相同的高度，但是当我们“显示/隐藏”内容时，我们只希望该列扩展，它确实（以某种方式），但列然后重新排序。我知道这就是列数应该如何工作，但是有没有强制列保持在原来的位置？

http://jsfiddle.net/2joLm7y9/

我试图将列填充从自动更改为平衡，但这似乎不起作用。Click 1 效果很好，但我认为这是因为隐藏内容在播放后不久。

我正在使用多个媒体查询来控制不同屏幕尺寸的列数。当页面加载时，它工作得很好。但是我注意到，当我将窗口的宽度缩小到几乎没有，然后再次将其扩展为全宽时，即使我指定column-count为 4，它也只显示 2 列，右边的 2 有一个空格列应该是。所有的内容都还在。只是挤在左边。当我查看当前正在应用的 css 规则时，它仍然显示column-count为 4。我不确定发生了什么。请给点建议？谢谢！

我正在使用的相关CSS：

工作示例：http: //jsfiddle.net/1o12sqsq/

片段：

看起来这是一个特定于 Chrome 的问题，因为 Firefox 显示它没问题。