Html CSS多列div格式问题

我创建了一个多列

div

，它在Firefox中格式正确，但在Chrome或IE中格式不完全正确。当您查看Firefox上的示例时，显示了三列，第一列中最后一项的框架正确结束。当您查看Chrome或IE上的示例时，会显示三列，但第一列中最后一项的框架在第一列和第二列之间拆分

是否可以将其格式化以在所有浏览器中正常工作？我正在寻找的解决方案将考虑到项目的数量或多或少会有所不同

下面是代码（）：

#分配区域类型{
背景色：#FFF；
边界半径：15px；
颜色：#000；
填充：20px；
最小宽度：400px；
最小高度：150px；
}
蒂尔格普先生{
对齐：居中；
文本对齐：居中；
字号：26px；
背景色：#EEE；
宽度：625px；
最小高度：145px；
高度：自动；
显示：块；
边缘底部：5px；
左边距：自动；
右边距：自动；
-webkit边界半径：8px；
-moz边界半径：8px；
-khtml边界半径：8px；
边界半径：8px；
顶垫：3件
垫底：3件
}
.areaGrp{
-webkit列数：3；
-moz列数：3；
列数：3；
-webkit列填充：余额；
-moz列填充：平衡；
列填充：平衡；
-webkit柱间隙：5px；
-莫兹柱间距：5px；
柱间距：5px；
文本对齐：左对齐；
}
.区域类型{
利润底部：3倍；
字体大小：13px；
垫底：2件；
}
.电邮{
字体大小：12px；
字体系列：佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
边框：1px实心#3498DB；
边界半径：5px；
背景：#EDF5FA 50%50%重复-x；
高度：自动；
最小宽度：100px；
左侧填充：5px；
右侧填充：5px；
}

测试用户
指定测试：
测试01
测试02
测试03
测试04
测试05
测试06
测试07
测试08
测试09
测试10
测试11
测试12
测试13
测试14
测试15
测试16

有可能

列填充只适用于Firefox，而不适用于Chrome和IE，因为目前只有该浏览器支持，其他浏览器不支持。据介绍，
列填充
由Firefox和Chrome支持；但根据和（我知道人们不喜欢这个来源），这种支持只适用于Firefox，而对Chrome和IE的支持是部分的（或者根本没有）

您可以使用一个解决方案（有点黑客）来修复显示器，并且似乎可以在Chrome和IE上使用：


使
标签内的
div
具有
显示：内联块

指定
div
的宽度为空间的100%

结果似乎是可行的，但现在有些垂直间距有点烦人（您可以通过向
标签添加一些样式来修复）。其代码如下所示：


#分配区域类型{
背景色：#FFF；
边界半径：15px；
颜色：#000；
填充：20px；
最小宽度：400px；
最小高度：150px；
}
蒂尔格普先生{
文本对齐：居中；
文本对齐：居中；
字号：26px；
背景色：#EEE；
宽度：625px；
最小高度：145px；
高度：自动；
显示：块；
边缘底部：5px；
左边距：自动；
右边距：自动；
-webkit边界半径：8px；
-moz边界半径：8px；
-khtml边界半径：8px；
边界半径：8px；
顶垫：3件
垫底：3件
}
.areaGrp{
-webkit列数：3；
-moz列数：3；
列数：3；
-webkit列填充：余额；
-moz列填充：平衡；
列填充：平衡；
-webkit柱间隙：5px；
-莫兹柱间距：5px；
柱间距：5px；
文本对齐：左对齐；
}
.区域类型{
利润底部：3倍；
字体大小：13px；
垫底：2件；
}
.电邮{
字体大小：12px；
字体系列：佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
边框：1px实心#3498DB；
边界半径：5px；
背景：#EDF5FA 50%50%重复-x；
高度：自动；
最小宽度：100px；
左侧填充：5px；
右侧填充：5px；
}
.tierGrp标签>分区{
显示：内联块；
宽度：100%；
框大小：边框框；
}

测试用户
指定测试：
测试01
测试02
测试03
测试04
测试05
测试06
测试07
测试08
测试09
测试10
测试11
测试12
测试13
测试14
测试15
测试16
如果您在chrome中检查文件，您可以看到chrome无法识别某些代码。只需谷歌就可以为所有浏览器提供一个替代品。