问题标签 [css-multicolumn-layout]

编辑：我想我只需要帮助理解列计数功能，它是相当新的，我还没有找到太多的支持。溢出、浮动等的默认值是什么？我似乎无法控制这些事情。我的列是否齐平似乎几乎是随机的，很大程度上取决于缩放。我评论了我认为它可能与 calc() 函数有关，在某些缩放中，高度和宽度四舍五入很有趣。

所以我从这里的 Pinterest 风格的图像展示中获得了灵感。当我将它放入我自己的代码中时，它基本上可以工作，除了取决于页面缩放，中间列没有用我的#photo_wrapper 的顶部填充。

大多数情况下，它的顶部是肉质的，但在某些缩放级别上，会有很大的空间。关于如何解决这个问题的任何想法？

正如您从我的代码中看到的那样，我一直在向它投掷很多东西，但没有什么能带来统一。

这是 Flickr 上图片的链接：http: //flic.kr/p/h7W2PT

这是CSS样式：

我正在尝试创建一个图像的砌体网格一般的想法是使用 column-count in 来实现这个例子。

我有三列包含一堆图像，CSS 和 HTML 与链接中的相同。问题是列不能正确对齐。最右边的列通常比其他列短得多。显然，除非图像大小相同，否则列永远不会完美对齐，但差异远大于此。有时前两列各包含十张图像，但第三列仅包含两张（图像大小相似），这意味着您可以轻松地将一些图像从第一列和第二列移动到第三列以获得更好的对齐. 这个结果似乎与列数的想法背道而驰。

如果您将某些图像更改为小得多的图像，上述链接也会发生这种情况。仅仅是列数仍然存在问题且不应使用，还是有一些技巧可以阻止这种情况发生？

编辑：这是基本的 CSS（减去许多基本样式，如过渡和其他东西，我试图将其删除以查看它们是否是罪魁祸首）。

这是一个显示问题的 JSFiddle。有四列，但在 Chrome 中，第三列比它需要的要短，图像可以从第四列移动以使它们更均匀。请注意，这个例子“没有那么糟糕”，但问题可能比这大得多。有时差值等于几幅图像的大小。

我对使用z-index创建的多列布局有问题column-count。我想将单击的 div 移动到列表顶部.animate()，但是当我单击右列上的元素时，它会位于左列元素的后面。这在 Firefox 上运行良好，但在 Chrome 中不起作用。

有任何想法吗？

JSFiddle

假设我有这个

我想将第一列向右对齐，第二列向左对齐，有没有办法使用 css 选择器来定位其中一个列？

我有一个包含一些文本的固定宽度和高度的 div。

div 被设置为使用 css3 列，如下所示：

文本流畅（moz.iexplore，chrome），但没有显示滚动条。（CSS：溢出：自动；）

如果我用溢出强制滚动：滚动；div 显示水平和垂直滚动条，但没有滚动的“句柄”。

知道如何解决这个问题吗？

我的问题是为我从数据库“它们是图像”中获得的数据安排一组图像。

我刚刚将分页添加到可以返回每页 9 ！

我用

Firefox 中的视图

Chrome 中的视图

这是 li & ul 的代码：

我现在一直在为几个 Wordpress 网站使用 CSS3 多列，我发现例外但我仍然想知道如何解决的一件事是，如果我在它赢得的列中放置一个列表（带有子项） '不保持列表的结构

为了让自己清楚，这是 HTML：

CSS 将是：

这就是你得到的：

这很好，因为它可以在 Wordpress 中显示这样的菜单。但是让我感到困扰的一件事是，它将子列表项放在下一列中，而该项目的父项位于上一列中。

这是可以修复的吗？

在有人说之前：你为什么不创建多个列表并创建自己的列（这是我问如何做到这一点时的建议）这是一个动态的 Wordpress 菜单，所以我无法控制有多少项目在菜单中。

我正在尝试制作一列类似于砖石的瓷砖，而实际上不必加载另一个 JS 插件。我想作为最后的手段我可以。我现在的问题是，如果我的列容器内的 div 很长，它们就会被包裹起来。

看我的小提琴：

http://jsfiddle.net/dLM6A/3/

请注意，蓝色图块跨越列。有什么方法可以强制它保持在同一列中吗？

HTML

CSS

我想制作一个包含 3 列的布局。这 3 列由divs 组成，每列都包含一个可变纵横比的图像。我想将这些多高度 div 堆叠在 3 列中，以使它们之间的间隙（边距）在垂直和水平方向上相等。外部不应有边距/填充；即 3 列应跨越容器的 100%。

这是一个例子：

在较小的屏幕上，我会将 3 列折叠成 1 列，并将所有 div 垂直堆叠。

在我的小提琴中，我们可以看到我曾经column-count拥有 3 列。我的问题是将column-widthand设置margin-bottom为一个一致的值，它们会产生相同的间隙：容器宽度的 1.5%。

这是我使用的 CSS。.container包含许多.tilediv，每个 div 又包含一个未知尺寸的图像。孩子的数量divs也是未知数。

的HTML：

如何将每个 div 之间的间距（水平和垂直）设置为流动值？

我尝试使用在列中显示多个按钮

和标记

但整个 div 显示为一条线，所有ps 看起来都向右浮动。

奇怪的是，这适用于Firefox 28，甚至 Internet Explorer 10而不适用于Chrome 33.