你能让网页从左到右而不是从上到下滚动？

Question

有没有办法可以将网页划分为从左到右而不是从上到下滚动的列？所以你得到了

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，如果它甚至存在：）

Answer 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>

Answer 2

是的，只需将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;
}

Working example