0

有没有一种方法可以让网页分为从左到右而不是从上到下滚动的列?所以你得到了

x x x x x
x ... ..x ... ... ... ...
x ... ..x ... ... ... ...
x ... ..x ... ... ... ...
x ... ..x ... ... ... ...
x x x x x

代替

x x x x x
x ... ..x
x ... ..x
x ... ..x
x ... ..x
x x x x x
  ... ...
  ... ...
  ... ...
  ... ...
  ... ...
  ... ...

如果这有意义......换句话说,我希望文本停止在浏览器窗口的底部,然后在新列中继续,并让这种情况“无限”发生,直到没有更多内容为止。

在下面添加了一个屏幕截图以更好地解释。您会在底部的屏幕下方看到文本。我希望屏幕下方的内容出现在顶部,紧挨着第一节经文。我想要做的是让一首歌曲适合一个屏幕(他们通常会这样做,尤其是在宽屏显示器上),而不必做很多脆弱的数学和计算或更改标记。它目前都在一个pre标签中,但我想只要和弦可以与它们所在的单词匹配(所以等宽字体等),就可以切换它。我基本上在寻找一些神奇的 CSS,如果它甚至存在的话:)

截屏

4

2 回答 2

1

这听起来像是 CSS Columns 的工作:

http://jsfiddle.net/Lkzqt/

html, body, .container {
    height: 100%;
}

.container {
    columns: 10em; /* desired width of your column */
}

<div class="container">
    <p>...</p>
    <p>...</p>
</div>
于 2013-01-30T20:26:20.683 回答
0

是的,只要让 div 并排排列,页面底部就会出现一个水平滚动条。

HTML:

<div id="wrapper">
    <div>Col 1</div>
    <div>Col 2</div>
    <div>Col 3</div>
</div>

CSS:

#wrapper{
    overflow-x:scroll;
}
#wrapper div {
    display:table-cell;
    border:1px solid #000;
    min-width:400px;
}

工作示例

于 2013-01-30T15:38:28.800 回答