2

HTML 和/或 CSS 中是否有办法自动将多列内容按高度分成页面？例如，如果您想在网页中显示电子书并使用多列，您可能希望在视口中一次显示 1 页 = 2 列，然后使用垂直分隔符来模拟分页符，并使用接下来的两栏页面。

例如，如果我想在一个 HTML 页面上以两列格式显示整个章节，如果我只是这样做column-count:2，那么每一列可能会很长，您必须一直滚动到底部才能阅读第一列，然后一路回到顶部继续到第二列。我正在寻找的是一种避免滚动回顶部但仍使用列的方法。

我意识到这可以用 Javascript 来完成，但我不是在问关于使用 javascript的问题。我只对纯 HTML/CSS 技术感兴趣。如果没有办法做到，我已经知道如何在 JS 中做到这一点。

编辑： 这是我正在寻找的简单说明：http: //jsfiddle.net/xGqAC/7/embedded/result/

需要明确的是，我没有专门的 Javascript 实现，我只知道可以在那里完成，我想已经有多列库可以做到这一点，但同样，这不是我想要的为了。

4

1 回答 1

1

您仅通过 CSS 查找的内容是不可能的。

但是你可以为你的列设置一个高度和一个宽度，如果你没有设置任何列数，列将根据需要添加，这可以让你达到我能想到的最接近的妥协......如果列是在您的浏览器中支持

html, body {
  height:100%;
  margin:0;
  overflow:hidden;
}
body {
  width:940px;
  column-width:450px;
  column-gap:10px;
  column-rule:solid;
  box-shadow:inset 0 0 0 3px;
  overflow:auto;
  margin:auto;
}

CSS（媒体网络/媒体打印）中的 PDF 没有什么比得上 :) http://codepen.io/anon/pen/hxcIt

于 2013-12-28T19:31:48.140 回答