我使用CSS列在2列中显示了一系列inline-block div。
我希望平衡列（例如每侧5个项目）。
没有inline-block它可以正常工作。然而，它有时会在我的一个元素中断。添加inline-block修复了此问题，但Chrome中的列不再平衡。在Firefox中它可以正常工作。
根据这篇文章（https://css-tricks.com/guide-responsive-friendly-css-columns/#article-header-id-9），默认情况下它应该是平衡的，除非我设置了一个高度。我没有设定高度，但我怀疑inline-block导致相同的情况。
column-fill属性应修复此问题，但不受Chrome支持。
我可以使用polyfill或变通方法吗？
答案 0 :(得分：1)
尝试使用display: flex代替display: inline-block。您不需要使用Flex中的任何其他内容，但它在某种程度上与inline-block的行为类似，并且在Chrome和Firefox中都适用于column-fill: balance（在Chrome中，您可能还需要使用{{1} }）。它可能不适用于所有情况，但我有类似的问题，它对我有用
答案 1 :(得分：0)
我不建议使用inline-block
我认为你应该尝试这种替代方案
对于响应式网站，请考虑使用媒体查询
答案 2 :(得分：0)
我在父容器上用display: list-item和list-style: none修复了它，所以我不必将所有子项都设置为display: inline。仅供将来参考。