问题标签 [column-count]

实际上我正在做这个项目： 项目页面

这是谷歌浏览器： 这是 Firefox 错误版本：

正如预期的那样，在 IE11 和 Chrome 上，我几乎可以以相同的方式看到它。问题出在火狐上。列数在其他浏览器中不起作用。我不明白我做错了什么。网站是基于 Bootstrap 的。这里是生成页面顶部的代码：

这是CSS：

}

如果需要，这是由 Wordpress 生成的 HTML：

我有一个将 CSS 列数设置为三的列类。如下所示：

我希望它以以下格式显示：

Apples Grapes Pears Bananas

这可以在这个小提琴上看到：http: //jsfiddle.net/fM8ce/1/

如果我删除香蕉，则所有三列都按预期使用，并以下列方式输出：

Apples Grapes Pears

这可以在这个小提琴中看到：http: //jsfiddle.net/fM8ce/

我怎样才能让四个项目按预期分布在三列而不是 2 列？

首先，我在这里发现了这个问题，但答案不太适合我的情况，这就是我问一个问题的原因，这可能看起来很相似，但实际上并非如此。如果这是有道理的:-D

我正在为来自cyberchimps 的“响应式”-Wordpress 主题创建一个子主题。

为此，我需要将文本分成 3 列，而且还需要在站点的后端进行编辑。我用 CCS 做到了：

现在产生了问题，第一列的开始比后面的低 5px。我不知道为什么。

如上所述，另一个线程中的答案不起作用，因为我也有只使用 2 列的子站点，这就是为什么我不能使用定义的宽度。在文本所在的 div 上方/之前总是只有另一个 div。

(PHP) 容器中的文本：

由 PHP 生成的 (HTML) 容器：

屏幕：

拍摄现场

有明显问题的镜头

我正在使用以下代码来允许文本流到第二列。一切都很好，除了字母的顶部在第一列的底部被切断，而字母的其余部分出现在第二列的顶部。

单击页面左侧的“功能”选项卡，然后查看“娱乐”部分以了解我在说什么。 http://www.dreamhomevacationrentals.com/hotels/spanish-modern-retreat/

任何帮助是极大的赞赏 ：）

我正在尝试在我的页面上创建类似报纸的专栏。但是，我的页面包含表格，并且在 IE、Chrome、Safari 和 Opera 中，表格被分成两个不同的列；这不是我想要的行为。如果有一张桌子，我想把它完全放在一列中。这是一些代码：

查看问题和解决问题的一种简单方法是使用 Chrome 并转到http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-gap并将代码粘贴到我的示例中。如果您尝试使用 Firefox，您会看到该表完全位于左列中。

我正在创建一个仪表板，它应该在两列的屏幕上显示内容。屏幕上的元素将是动态的并且大小不同，每个元素的大小都会随着时间而变化。因此，我选择了多列 div 布局，这将很好地垂直填充列并将内容均匀地分布在两列上。

对于有很多行的表，想法是将这些表放在一个固定高度的可滚动容器中。这样，所有元素仍将适合屏幕，只留下每个表格的前 X 行可见。

我将这些容器化表格放在 li 元素中，在一个多列 div 中。然后我使用 javascript 来计算前 X 行的高度，这些行应该在不滚动的情况下可见。

到目前为止，一切都很好。

这一切归结为：

CSS：

HTML：

JavaScript：

JS Fiddle 中的一个工作示例：

http://jsfiddle.net/m63LL112/4/

这个 jsfiddle 在 IE 和 Firefox 中可以正常工作（应该显示两列）。

但在 chrome 中，它只显示 1 个大列，其下方有很多空白。

.

我认为的问题是：

在计算 li 元素应如何分布在列上时，Chrome 似乎不尊重新的容器高度。那是因为容器高度是由 javascript 函数更新的。第一列元素下方的空格说明了这一点。

有趣的是，如果我从 id="divMultiColumn" 的 div 中删除 multiColumn 类，然后使用“inspect element”功能手动重新应用该类，那么 Chrome 会按我的预期工作，它会将内容分布在两列，就像 IE 和 Firefox 一样。如果我使用 JS 来模拟 multiColumn 类的删除和重新应用，那么这不起作用（请参阅小提琴中注释掉的 javascript 位）。

此外，如果我使用静态 CSS 设置表格容器的高度属性，则 chrome 可以正常工作。

我无法弄清楚为什么 Chrome 在使用 JS 动态更改列中元素的高度后没有重新计算内容应如何分布在列上。这是一个错误吗？

有人有解决方法的想法吗？

我想在一行中有 3 个 div/图像（管理员有 div，结果页面有图像），其中有 8 个或更多/更少（它是动态的）。

我使用了 column-count，效果很好，但是我遇到了一些问题。

1. 首先是支持，因为我必须针对 IE7 进行优化。
2. 其次是它如何显示图像（从上到下而不是从左到右）。
3. 第三个是当你有 4、7、10、13、16 等图像时的问题。

我不想使用花车。有没有办法让它响应？所以基本上，最大大小为 XXXpx 的 div 并且在调整页面大小时它会调整大小而不是仅仅下降到另一行？

http://jsfiddle.net/xabxt3re/1/

有时它不会让你调整右侧的大小，只需关闭页面并再次打开它。应该管用。奇怪的 JSFiddle 问题。同样在您点击那里后，它会在最后添加新图像，因此您可以观察我想要避免的行为。

所以基本上，有什么方法可以在一行中有 3 个 div/图像，所以如果浏览器窗口不够宽，它们会调整大小，而不是放到另一行？或者修复列计数显示图像的顺序以及它如何用 2 个图像填充前两列而不是平均分布？

Ps.：如果有人反对我的问题，你至少能告诉我为什么吗？所以我可以改进它并学习下一次？因为真的很烦。我提供了所有细节，甚至提供了我所拥有的代码。

感谢您的编辑建议。我在链接后添加了空格，但我忘记了您必须添加 2 个空格才能创建一个....

Chrome 中的列列表有一个奇怪的错误：当您单击 1+ 列（不是第一列）中的第一个链接时，该项目会将列向下移动约 5px。

这是一个错误吗？我可以用一些 CSS 规则来防止它吗？

经过测试的 Chrome 版本：39.0.2171.71 m

在 Chrome 中测试（小提琴链接）：

column-list 可以很好地工作，而不是自动换行。

测试：http: //jsfiddle.net/jbe07sbs/1/

在 Chrome 中测试 39.0.2171.71 m

相关：字段集的列计数不适用于 Firefox

我有一个不同高度的块列表。

我希望它们使用 css column-count 属性在 3 列中流动。我不希望块被破坏，所以我应用 column-break-inside：避免。问题是当它被应用时，列的高度划分是非常不平等的。

请参阅此代码笔http://codepen.io/KwiZ/pen/PwmXPB。高度划分本来可以更好，比如当我为容器设置固定高度时：http://codepen.io/anon/pen/emWbmm，但当然固定高度是不好的，应该避免。为什么会发生这种情况以及如何使列的高度自然相等？