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 回答