使用Evernote Clearly Chrome Extension的CSS多列

Question

我在I can taste it, but still I can't have it附近：）

我喜欢Evernote Clearly Chrome扩展程序，这使我可以专注于我需要的内容。但是，在我的1920x1200屏幕上，我宁愿让它使用两列显示内容，而不是一列。

显然没有这样的内置＆＃34;列＆＃34;设置。幸运的是，它确实有一个＆＃34;自定义主题＆＃34;支持自定义CSS的选项。

我几乎可以上班，但并不完全。当我使用

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

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

另一方面，如果我使用

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

然后将整个文档分成两列。左列显示十亿行，因此您必须向下滚动并向下翻页，然后您必须返回到下一十亿行的顶部。

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

所以，我的问题是，是否有（CSS）方法将div中的段落序列拆分为＆＃34; pages＆＃34;，并将每个此类页面拆分为两列或更多列？< /强>

修改：

我使用Martin Fowler＆＃34; Mocks Aren't Stubs＆＃34;作为解决方案的测试不好。

使用大型Verdana字体来自文章＆＃34; Clearly, you need clearly＆＃34;。

在标题后强制列分隔符（并且，通过扩展名，在标记为＆＃34的代码块之前和之后;预先＆＃34;格式化）来自文章＆＃34; Avoid breaking of columns inside CSS3 multi-column layouts＆＃34;

我在Meagan Lynn的回答（但请参阅我的评论）后使用的当前样式表是：

div.page_content     {-webkit-column-count: 2; }
h2, h3, h4, h5, pre  {-webkit-column-break-before:always; }
pre, p:nth-child(2n) {-webkit-column-break-after: always;}

更新：经过验证，也适用于safaribooksonline - 请参阅

。

与＆＃34; native＆＃34;对比显示

。

不完美但是，恕我直言，更好。特别是当两列是＆＃34; full＆＃34;时，如

：

Answer 1

所以我正在四处寻找并希望能帮到你的东西。

尝试使用

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

这应该在一组四个p标签之后突破到一个新列。

与div.page_content {-webkit-column-count: 2;}一起使用，您希望得到您想要的东西;）

来源：Select every Nth element in CSS

Answer 2

你遗失的部分是

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

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

本文展示了它应该如何，最终将如何：http://www.w3.org/TR/css3-multicol/#overflow

以下是此属性的当前支持：http://caniuse.com/multicolumn