CSS3 多列和可变高度内容问题答案

【问题标题】：CSS3 Multi Columns And Variable Height Content IssuesCSS3 多列和可变高度内容问题
【发布时间】：2017-08-28 00:51:21
【问题描述】：

我目前正在开发一个原型，该原型使用 CSS3 多列来划分内容，它似乎运行良好。我的问题是，作为列的一部分的块内部有一个扩展的高度部分，并且在 Firefox 中，当 CSS3 多列中的元素的高度发生变化时，它会消失，然后 Firefox 崩溃。

CSS3 多列不应该考虑内部不同高度的内容还是不是为那种事情而设计的？我真的很讨厌不得不使用像 Columnizer 这样的插件，因为 Columnizer 很难正常工作。

这是布局：

[DIV]
    [CONTENT] - Default height is 38 pixels
    [EXPAND LINK] - A link when clicked that modifies the height of content to be 52 pixels.
[/DIV]

问题是一旦点击链接并且高度发生变化，就好像它失去了它的布局和定位（高度和宽度变为 0），然后 Firefox 崩溃。如果我使用 Firebug 手动更改高度也是这种情况。

【问题讨论】：

【解决方案1】：

我解决了这个问题，基本上是发布这个问题，我的解决方案如下，以防其他人遇到这个问题，我相信有些人会。

我有一个带有适当 CSS3 多列代码的父 div 元素。内部元素是文章元素（虽然你可以只使用 div）。问题是内部文章元素被向左浮动（只是出于必须浮动事物以呈现柱状项目外观的纯粹习惯）。浮动元素与 CSS3 多列代码发生冲突，从而导致浏览器崩溃。

我猜是因为浮动修改了元素的布局，多列代码可能试图重新调整框，然后进入无限循环。我不完全确定发生了什么，但多列 div 内的浮动元素或任何东西都不好。

【讨论】：