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