2

HTML や CSS で、複数列のコンテンツを高さでページに自動的に分割する方法はありますか? たとえば、Web ページに電子書籍を表示し、複数の列を使用する場合、ビューポートに 1 ページ = 2 列を一度に表示し、改ページをシミュレートするために垂直方向の区切りを設定し、次の 2 段組みのページ。

たとえば、章全体を 2 列形式で 1 ​​つの HTML ページに表示したい場合、単にcolumn-count:2.最初の列、次に一番上に戻って 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 に答える