有没有办法可以将网页划分为从左到右而不是从上到下滚动的列?所以你得到了
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,如果它甚至存在:)
答案 0 :(得分:1)
这听起来像CSS Columns的工作:
html, body, .container {
height: 100%;
}
.container {
columns: 10em; /* desired width of your column */
}
<div class="container">
<p>...</p>
<p>...</p>
</div>
答案 1 :(得分: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;
}