css - 平衡柱

Question

我有一些内容设置为 3 列，但是当它在 Chrome 中从列到列换行时，它会在下一列的顶部添加边距，这在某种程度上是有道理的，但看起来很糟糕。

这是我所说的一个例子：http: //www.sanguinediabetes.com/wp/concept/

我该如何设置它的样式，以便在某些列的顶部没有丑陋的间隙，但在中间列结束的段落之间仍然有空间？

Answer 1

您所看到的可以说是多列元素的正确行为。您在每个段落上设置的底部边距将下推后续段落，即使在这些段落之前有分栏符也是如此。是的，可以说这很奇怪，但是，这个布局模型还有更大的问题需要现在修复。

解决您的问题的一种方法是删除所有段落边距并在某些选定段落之后强制分栏。去年修订的规范草案提供了column-break声明。但到目前为止支持几乎为零，关于该主题的 MDN 文章不存在，而且 chrome 甚至不假装支持它。基本上，你处于一个相当新的领域，而且工具还不完全在那里。

当我在这里时，您的布局还有其他紧迫的问题。要查看最基本的，请尝试将视口调整为窄，大约 500 像素。您的列变得非常薄且难以阅读，实际上只是一堆单独的单词。考虑到你的文字说“手机帮助普及了界面设计的基本概念：用户不应该有责任通过复杂的程序和隐藏的选项来实现简单的任务，甚至是复杂的任务。它是软件的设计职责是让每个操作都简单、明显和快速。”？这有点好笑。你试过用手机看这个吗？考虑到内容，我会推荐它。

Column-count很棒，但是如果您正在寻找任何真正的浏览器兼容性，那么现在使用好的旧浮动列会更好。也许尝试一种真正的布局的一些变化。