Html 带有Evernote Chrome扩展的CSS多列

我是如此接近：）

我喜欢Chrome扩展，它可以让我专注于我需要的内容。但是，在我的1920x1200屏幕上，我希望它使用两列而不是一列来显示内容

显然没有这样的内置“列”设置。幸运的是，它有一个支持自定义CSS的“自定义主题”选项

我几乎能让它工作了，但不是很好。当我使用

p {-webkit-column-count: 2; }

每个段落被分成两列，这意味着你在左边有三到四行，然后你必须切换到右边。然后回到左边，回到右边，依此类推

如果，另一方面，我使用

div.page_content {-webkit-column-count: 2; }

然后将整个文档分为两列。左列显示了10亿行，因此您必须向下滚动并向下翻页很多，然后您必须返回顶部查看接下来的10亿行

显然，这不是我想要的。我想要的是，假设屏幕上显示的行数是L，那么第一个L行将显示在第一列，第二个L行将显示在第二列，第三个L行将显示在第二页的第一列，依此类推

因此，我的问题是，是否有一种（CSS）方法可以将div中的一系列段落拆分为“页面”，并将每个这样的页面拆分为两列或更多列？

编辑：

我使用Martin Fowler的“”作为解决方案的测试

大Verdana字体的使用来自文章“”

从文章“”中强制在标题（以及扩展到标记为“pre”格式的代码块之前和之后）后分栏

根据Meagan Lynn的回答（但请参见我的评论），我正在使用的当前样式表是：

更新：已验证该功能也适用于-请参阅

与“本机”显示形成对比

不是很完美，但是，嗯，更好。特别是当两列都“满”时，如

---

：

所以我在四处挖掘，发现了一些东西，希望能帮到你

试用

p:nth-child(4n) {
   -webkit-column-break-after: always;
}

这应该在四个p标记组成的组之后断开到一个新列

与

div.page\u content{-webkit column count:2；}

配合使用，您将有望获得所需内容；）

来源：

你丢失的那块是

p, pre {-webkit-column-break-after: column;}

不幸的是，包括Chrome在内的现代浏览器还不支持它

本文展示了它应该是什么样子，最终会是什么样子：

---

以下是当前对该属性的支持：

这无疑是向前迈出的一步，或者更准确地说，是旁白：）结果是Chrome创建了无限多的列！在每两段之后，它会在右边创建另一列！所以，我想要的是一个像书一样的安排，每个“页面”应该有两列，然后使用“页面向下”移动到下一页。我得到的是一个很宽的页面，有很多列。然而，令人惊讶的是，这是非常好的！！只需使用右/左键滚动即可。不是我想要的，但是非常有用！这与Meagan的“pre，p:nth child（2n）{-webkit column break after:always；}”有什么不同？转到链接，但不理解：（Webkit与标准不同，使用“始终”而不是“列”或“页”。在webkit完全支持之前，它看起来像是一种用于断列的占位符。在完全添加支持之前，您可能会看到一些奇怪的怪癖，例如缺少包装溢出，这正是您所寻找的。因此Meagan的答案是使用当前的webkit支持，而我的答案是使用web标准。

p, pre {-webkit-column-break-after: column;}