问题标签 [css-multicolumn-layout]

我正在尝试使用 CSS3 列，我注意到添加了顶部和底部边距，尽管我明确将它们设置为 0。这是一个屏幕截图：

我用黄色突出显示了边距。红色矩形是从 Firefox 中的 Web Developer Toolbar 插件绘制的块级元素轮廓。

这是我的CSS：

我怎样才能摆脱边缘？

根据要求将我的代码上传到jsbin。它还显示了两列顶部之间的差异。当我不使用列时，边距不显示。

使用以下 HTML，将列表显示为两列的最简单方法是什么？

所需显示：

该解决方案需要与 Internet Explorer 一起使用。

假设我有一个div包含一组元素（div）的元素，它们可能具有不同的高度，但它们都将具有相同的宽度。

我目前使用同位素 + masonry 实现了这一点，但由于一些浏览器已经支持 CSS3 多列，我希望为这些浏览器提供唯一的 CSS 解决方案，其余的回退到 Javascript。

这是我一直在尝试的 CSS：

然而，这使得元素的流动是自上而下的从左到右。我想要一个左右自上而下的流程。这是我想要的一个例子：

但这就是我得到的：

在Flow 多列元素中，在自上而下之前从左到右询问了类似的问题，但我对答案不满意，并且它不适用于不同高度的元素。这对于 CSS 列是否可能，或者它是一个限制？

我正在尝试使用列进行响应式布局，但在某些情况下，它们的数量正在变化。我已经设置column-count:3了，但是当我有 4 个 div 时，它们的位置是 2x2 而不是 3x1。

当我有 7 列时会发生同样的错误，依此类推。

这是一个 JSFiddle 演示：http: //jsfiddle.net/BmG44/

我正在尝试将事件列表分为 2 列。当我做一个简单的column-count时，我似乎无法让它们在顶部对齐。我在这里想念什么？

域名在这里

这是我的代码：

结果是：
1 4 7 10
2 5 8 11
3 6 9 12

我想要的是：
1 2 3 4
5 6 7 8
9 10 11 12

那可能吗？我该怎么做？

我有一个ul使用 JavaScript 动态生成的 HTML。生成后，我ul使用 JQuery 的$('#id').css('property',value)方法设置样式。这是有问题的代码的样子：

本质上，我设置了 3 个不同的column-count属性——一次用于常规 css，一次用于 -moz 域中的 css，一次用于 -webkit 域中的 css，然后我还设置了width属性。

ul这段代码在 Firefox 中工作得很好——带有更新 id的元素的 cssdatasetContent就好了。

但是，当我在 webkit（Safari 或 Chrome）中运行它时，它会停止工作。奇怪的是，该width属性（我在上面那一长串 css 中设置的最后一件事）设置正确，但没有设置其他属性。如果我在 Chrome 的检查器中手动更改它们，网站更新就好了。但是，当然，我不能合理地期望我网站的用户在我的页面上手动修改 CSS 以使其看起来不错:)

有谁知道可能导致这个问题的原因是什么？

更新我已经尝试切换ul到 a div，这根本没有任何区别。问题只是 JQuery CSS & column-count 属性。也许这是直接向 JQuery 的人们提出的问题？我会在这里等着看有没有回应，如果没有，我会在那里寻找合适的渠道。

（我在堆栈上查看了类似这样的其他一些问题，特别是 CSS 列底部的额外空间，但我看不到提问者在他提出的小提琴中遇到的问题，并且尝试该解决方案没有用无论如何。）

无论如何，我在应用列宽的 div 中的列下方添加了额外的空间。这是示例的链接。我的问题是任何列下方的额外蓝色空间。当我删除一个或另一个时，它似乎解决了。我可以让容器 div 缩小以仅使用所需的空间吗？

HTML：

CSS：

我正在使用该column-count属性来设置一个页面，该页面在三列中有多个 div，这在大屏幕上看起来很棒。每个 div 都有一个固定的宽度，比如 500 像素（包含图像）。

然而，当在较小的屏幕上工作时，浏览器会尝试将原始 \three 列中的内容强制转换为两列。当内容开始重叠时，是否有首选的最佳方法让内容转到两列？

I have the following setup:

The list items are generated dynamically and displayed ten per page.
I wanted to display them in two columns and display each list item as a block by itself. That is working out okay except that the article part of the next lists is spilling over to the next column.

Check the link below for an image explaining what I mean.
http://ubuntuone.com/4O59Hy13A14rzfPu3N5pcL
As you can see, the red border represents a list item whose article part has spilled to the next column.

My CSS:

Any help to make the whole list act like one block is appreciated.
Thanxs