如果网页是用木头做的,木纹会上下延伸。 垂直方向是网页布局的自然流动。 当页面元素到达浏览器窗口的右边缘并超出时,流默认会将该元素“包裹”到下一行。 页面上的内容越多,页面就越高,而不是更宽。 为什么是这样? 因为这很合理。 我们的眼睛习惯阅读相当短的文本行,所以如果我们看到一行很长的文本,阅读起来会很痛苦。 段落需要有换行符才能可读(因此称为文本“块”)。 我们当然不想自己硬编码换行符到标记中。 显然,我们不必这样做,浏览器会为我们进行此包裹。 因此,出现了垂直扩展。

这种自然流动导致了网页布局中的约定,甚至延伸到了硬件本身。 请注意,有多少台计算机鼠标(鼠标?)有一个专门用于垂直滚动的滚轮。 但是网页都配备了垂直和水平滚动条,对吧? 如果我们在网页布局中负责,我们可以“逆着木纹”,创建主要使用水平滚动甚至可以随着我们添加更多内容而水平扩展的网页。 可能是对“可用性”的一点打击,但这确实可以是一种很酷的创意效果!
最好的方法
我要冒险地说,我认为表格是水平滚动网站的最佳布局技术。
更新:这是一篇比较旧的文章。 核心思想是,使用表格,您可以设置一行,该行可以无限延伸而不会换行。 如今,您可以在父级元素上使用 display: flex;
更轻松地实现这一点,尽管这种方法的 UX 存在问题。
在我解释原因之前,让我们看看其他几种可能的技巧
- 设置一个非常宽的静态宽度。 也许开始水平布局最“快捷和最脏”的方法是,在 body 元素本身设置一个非常宽的静态宽度。 比方说,10000px。 试试看,你肯定能得到一个水平滚动条。 虽然这样做可以,但这有点不灵活。 网页是动态的,我们应该为可扩展性做好准备,而不是用静态宽度限制自己。 想想普通的垂直滚动网站。 你会给页面设置静态高度吗?
- 浮动 + 空白。 我花了一些时间研究
float
属性和white-space
属性,看看我是否能找到一种方法来对抗浏览器的自动换行,但没有太大进展。 浮动但没有宽度的页面元素表现出一种属性,即它们会扩展到其内部内容的宽度。 我想,如果我在里面放很多浮动元素,它可能会一直扩展到浏览器窗口的宽度之外。 没有用。 CSS 中还有一个white-space: nowrap;
属性,我认为它可能可以用来对抗自动换行,但它只适用于文本元素,而不是块或任何设置为内联的元素。 唉,不行。 - 使用 JavaScript 设置宽度。 JavaScript 显然有能力操作页面元素并在运行时进行计算。 我们可以用它来创建一个表现出可扩展性的环境。 但是,使用 JavaScript 处理页面布局被认为是糟糕的做法。 我通常赞同这种观点,但我相信你可以在这种情况下使用 JavaScript,只要你谨慎使用,并确保在禁用 JavaScript 时页面仍然可以正常使用。 作为额外的好处,页面在启用或禁用 CSS 时都能正常使用,以及任何组合。
<table> 方法
我们需要一个可以根据需要水平扩展,并且永远不会“换行”的页面元素。 表格单元格的行非常适合这里。 表格单元格会根据其内容的性质扩展以适应内容,并且永远不会换行,除非开始新的一行。 完美。
假设我们试图将一系列博客文章一个接一个地水平排列。 我们需要使用这样的页面结构
<table>
<tr>
<td>
.. blog post #1
</td>
<td>
.. blog post #2
</td>
<td>
.. blog post #3
</td>
</tr>
</table>
令人讨厌,对吧? 使用这样的标记永远不会让人感觉很好,不仅仅因为它是一个表格,还因为它是非语义化的。 我们在这里使用了一堆仅用于演示且与内容无关的标签。
理想情况下,我们的页面结构应该是这样的
<article class="post">
.. blog post #1 ..
</article>
<article class="post">
.. blog post #2 ..
</article>
<article class="post">
.. blog post #3 ..
</article>
使用 jQuery,我们可以轻松地兼得两者!
编写我们想要的标记,获得我们需要的标记
我们将使用 jQuery 来让我们使用我们想要的标记(div 结构)并操纵它以获得水平滚动所需的标记(表格结构)。 你应该在脑海中想起关于使用 JavaScript 进行布局的警示,但请放心,我们将确保在禁用 JavaScript 时页面仍然可以使用。 作为额外的好处,页面在启用或禁用 CSS 时都能正常使用,以及任何组合。
让我们先想清楚我们想要发生的事情
- 将所有帖子包裹在一个表格标签和一个行标签中
- 将每个帖子包裹在一个表格单元格标签中
现在,让我们在页面的 head 部分包含 jQuery,并编写完成此操作所需的 jQuery 代码。
<script src="js/jquery.js"></script>
<script>
$(function() {
$("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
$(".post").wrap("<td>");
});
</script>
这就完成了! 请注意,单元格间距是如何作为内联属性添加到表格元素中的。 我们通常会使用 CSS 为单元格应用填充,但我们希望确保每个博客文章块在禁用 CSS 时也能尽可能地可读。 没有这个,块会直接紧挨着彼此,难以阅读。
此示例的整个 CSS 文件非常非常简单
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: 'Lucida Grande', Helvetica, sans-serif;
background: #121212;
color: #999;
padding: 20px;
}
tr {
vertical-align: top;
}
.post {
width: 500px;
}
p {
font-size: 1.2em;
margin: 0 0 15px 0;
}
h1 {
font-family: Sans-serif;
font-size: 4.0em;
letter-spacing: -1px;
color: #ccc;
}
h2 {
font-family: Sans-Serif;
font-size: 3.0em;
letter-spacing: -1px;
color: #ccc;
}
只有几处需要注意的地方。 .post div 上的静态宽度控制每个块的宽度。 表格行上的 vertical-align 属性使每个块与表格单元格的顶部对齐。 默认值为 middle,因此这很有必要。
结果
如果 CSS 和 JavaScript 都已启用(99% 的用户),我们将拥有一个执行得当的水平滚动网站。 如果 CSS 和 JavaScript 都已禁用(屏幕阅读器),单个博客文章的结构将控制页面,假设它们具有语义标记,页面看起来会很棒。 这里唯一的问题是,如果 JavaScript 已启用而 CSS 已禁用(很少见),页面看起来会有点奇怪。
查看 CodePen 上的示例
通过表格包裹将帖子排成一行,由 Chris Coyier (@chriscoyier) 创建。
在 CodePen 上。
水平滚动的其他技巧
实际上,扩展页面的宽度并使用滚动条来导航它只是实现水平滚动效果的一种方式。 你也可以使用 Javascript 滑块,它会模拟这种效果。 Flash 也是另一种可能。 在网页设计中,总是有很多方法!
我发现采用这种方式的网站非常“时髦”,但这种类型的网站设计可能不太适合商业用途。 我不会因为网站采用了这种方式而反感,但我敢肯定地说,大多数人会觉得它很不自然。
话虽如此,但这篇文章很棒!
这个 Jquary 在 chrome 中可以正常运行,但在 firefox 或 ie 中不行… 请帮助
嗨,chris,Evanescence 网站是唯一一个可以使用鼠标滚轮水平滚动的网站,为什么?
我认为水平网站不太受欢迎,因为您可以在较小的屏幕尺寸上滚动获得更多空间,对于显示器来说,那就是高度。 此外,当您使用鼠标上的滚轮时,您的示例会向下滚动。 如果我的内容较少(比如一个作品集页面),我会将我的网站制作成水平网站。
@roger:看起来 Evanescence 网站使用了一些 Javascript 来实现这一点
http://www.evanescenceuk.co.uk/js/thw.js
很不错。
这次不行,Chris。
也许,如果我(我们)能够适应它…
传统上,以及一般来说,我们大多数人习惯于阅读从左到右 (LTR) 或从右到左 (RTL) 的内容。以 500 像素为单位向右移动整个块会让人分心并破坏节奏。我们大多数人可以很自然地用鼠标向下滚动阅读。
在新页面上“归零”并不起作用。
有趣的想法,但我们有充分的理由尽量避免开发宽度超过屏幕的页面。
Dave
@chris,是的,我刚刚把它添加到你的示例中,现在它可以使用滚轮滚动啦!
我认为普通大众会发现很难适应这种方式,但对于设计师展示作品集或炫技来说,它是一种与众不同的方式,可以打开更多设计可能性。
不是每个人都喜欢,但这毕竟是不同的…
我的网站之前就是这样,但我添加了锚链接,可以跳转到页面的不同部分。我认为这种方式适合设计师网站或其他人们期望“与众不同”的网站,但并不适合普通互联网用户。
好文章!
浮动元素默认情况下会一个接一个地堆叠。
你无法在这个示例中让它们堆叠的原因是 body 元素。它将 overflow 设置为 auto,这意味着任何超出范围的内容都会被裁剪,并且会出现滚动条。然而,浮动元素无法在超出盒子框架的空间中表现出这种行为。你可以尝试禁用 overflow (visible),但这会产生另一个副作用:浏览器窗口宽度。
我不建议使用表格。如果你想要这种效果,可以尝试使用 display: table-cell 和 expression()(用于 IE)。
这对设计师来说是个不错的东西,但你有没有试过打印出来?:0)
拜托…
不要为了这种修复而滥用 JavaScript 框架。我甚至不明白你为什么需要 JavaScript 来做这件事。
也许对“可用性”来说是一个小小的打击,
你是说一个巨大的打击。大多数鼠标都没有水平滚轮 o.o
在我的 IE7 上根本不起作用,
Al
有趣的是 IE 7 不起作用,IE 8 beta 却可以正常运行。我想知道 IE 7 是否对 jQuery 代码的格式有一些特殊的要求,而我并不知道。我知道这不是有效的代码(你可以通过抽象它来解决这个问题),但我真的看不出还有什么问题。
在 FF2 和 FF3 中可以正常运行
在 IE7 中,段落只是垂直显示
还有其他人遇到过这个问题吗?
Al
下载了示例文件,在 IE7 中也是这样,
在 FF 中,段落似乎垂直居中,我不确定是否是
本意
Al
http://www.hotel-oxford.ro/
我遇到了很多使用这种技术的 MooTools 网站。
我特别喜欢这个酒店网站,因为即使禁用了 JavaScript,它仍然是一个可用的网站!
水平滚动在网页中并不常见,原因与文本在出版物中不会跨页显示相同:长时间在页面上水平滚动会让读者更快地感到眼疲劳。当然,你可以通过打破常规来引起兴趣,但这只应该在你的设计背景允许的情况下进行。可用性并不一定意味着枯燥乏味,它可以带来既实用又极具创意的设计。
如果禁用了 JavaScript,水平布局完全无法工作,难道没有必要吗?
@匿名用户 - 关键在于,即使关闭了 JS,页面仍然是可用的。如果你访问了那个网站,你就可以亲眼看到。这是为了让用户体验更有趣,保持他们的注意力,并使其成为更“有趣”的体验。
http://www.tiffanymumford.com/fashion
我使用了 whitespace:nowrap,指定了一个容器高度,并设置了图像类为 display:inline。
这对我来说很有效。
啊,看起来不错!我认为用水平滚动来显示这样的图片很棒。不知何故,我觉得阅读文本并上下滚动更舒服。
那个示例列表中有一些非常酷的网站。让我很想尝试一下。
我发现另一个非常棒的水平滚动网站示例:http://deanoakley.com/
它使用 div 构建,并使用了上面提到的固定宽度的“脏”技术。如果你禁用了 JavaScript,你就无法使用滚轮滚动,但移动滚动条本身是可以的。
总的来说,我喜欢这种设计风格,因为它适用于原创内容较少的网站,比如作品集,但我不认为它适合企业网站或电子商务网站,原因是 Leroy 解释的那样。
不要
水平滚动的网站是网页设计的七宗罪之一,与使用动画 GIF、繁忙的背景和强制浏览器窗口调整大小等同列。
糟糕,糟糕,糟糕
你怎么会错过 http://www.csszengarden.com/?cssfile=037/037.css
:O :O
你没读过 CSS Zen Garden 那本书吗?
还有那些抱怨的人……看看我刚给的链接……在我看来,它是非常实用的。此外,我使用鼠标中键滚动,所以我不会觉得烦人。
对于以信息传播为主要目的而非 Web 应用程序的网站,我认为这种方式非常有用,尤其是它带来的 WOW 效果。我厌倦了所有想要加入 2.0 热潮的网站上那些愚蠢的圆角和亮色。
你好……关于 Evanescence 网站……和其他网站……它们使用了 thw.js 脚本
你可以在此处找到更多信息:http://www.thehorizontalway.com/
最好的
我知道它不严格算作你正在讨论的“侧向滚动”网站,但 Jonathan Yuen 的网站是我见过的最棒的个人网站。它绝对打破了常规。我认为如果不体验到真正的喜悦,你就无法浏览(探索?)它。
http://www.jonathanyuen.com/main.html
@Jason:哇,探索它真是太愉快了,谢谢你的链接!
嗨 Chris,
我不想纠正你,但屏幕阅读器默认情况下不会关闭 CSS 或 JavaScript。
由于历史原因,它们在遍历表格结构时也几乎没有困难,只要表格结构按线性方式排列。
对屏幕阅读器来说,水平滚动或垂直滚动在概念上是无关紧要的。它只是一系列线性数据,带有跳转点(标题、表格、tr、td 等)。
我尝试将 WordPress 实现到水平布局中,但我的主要问题是,在首页的每篇文章后面都有一条“下一篇文章”链接,然后链接到同一首页上的下一篇文章。
你可以轻松地在单个文章页面之间跳转,但无法在首页上实现文章之间的跳转。将锚链接添加到 index.php 模板中会导致很多混乱。
我仍然在寻找解决方案,因为我认为水平网站的外观和功能可以很出色。
还可以动态地修改外部样式表。看看 http://www.itskevandeursen.nl,我在那里有一个 PageManager 类(用 PHP 编写),我可以从中获取将在我的网站上显示的页面数量。我在页面头部的 JavaScript 代码块中打印了页面数量。这段 JavaScript 代码会构建对 CSS 文件的调用,该文件实际上是一个带有 text/css 头部的 PHP 文件。body 元素的宽度根据页面数量和用户屏幕宽度进行设置。它并不完美,但可以正常运行。一个主要的缺点是,当禁用 JavaScript 时,CSS 文件不会加载 :(。
我还使用了一个 jQuery 插件(serialScroll)在页面之间滑动,因为在所有浏览器中,跳转到元素的 id 并不像预期的那样工作。
NO NO NO NO NO NO NO – 这是一种糟糕的做法,我希望人们不要复制它,甚至不要考虑使用它。
使用 JS 插入表格与从一开始就插入它一样糟糕,最终页面将包含一个糟糕的表格。
失望 :<
谢谢 :)
我认为这对阅读文本来说会很困难,但对于照片库来说,它可以用一种有趣的方式使用。我的一个朋友给我发了一个网站,是她朋友的网站,她朋友是摄影师,我正在制作一个摄影网站,我认为这将是一个很好的用处。
http://www.francodeleo.com/
在 IE6 上不起作用。它将 div 在每个 div 之后向下拉。
有什么解决方案吗?
有人有解决 IE6 和 IE7 的方案吗?
拜托……
IE 问题解决方案!
来自这个 JS 的 HTML 很笨拙,在 TR 到 TD 集之间有一些额外的 DIV 标签。
我将代码切换到类似这样的代码,它对这两个浏览器都运行良好
$(function(){
$("#page-wrap").wrapInner(document.createElement("tr"));
$("#page-wrap").wrapInner(document.createElement("table"));
$(".post").wrap("<td>");
});
在使用它包裹某些内容之前,实际创建元素至关重要。另一个 IE 怪癖结束了……
我也有 IE6 问题。
http://www.hotel-oxford.ro/ –
我查看了这个网站,没有底部滚动条。有人知道他们如何在没有滚动条的情况下创建水平网站吗?
你们有没有听说过这首简单的歌谣 –
….”为了水平滚动”,
按住 “SHIFT” 键,然后像平时一样滚动……
啊……太神奇了。
我可以在我的 “鼠标” 上正常滚动,同时按住 Shift 键,瞧。
您好 Chris,这是一个有趣的任务,要创建一个自然水平滚动的网站,您写了一篇关于它的好文章。
但是,在我看来,实现类似内容的最自然和最正确的方法是,不设置 body 的宽度,只将高度限制为 100% 或更小。
然后通过为 “段落” 标签设置宽度,例如 45em,并确保它左浮动并显示为块,我相信它会很好地水平对齐。您唯一需要担心的是不要创建超过 20 行文本的段落,例如。但是,什么时候会有人创建这么长的段落呢?
为什么你不尝试一些这样的东西?或者我是否误解了你试图完成的事情?
此致,
David Bartenstein
与其使用 javascript 来创建表格行为,我们为什么不能直接使用 css 命令
或者
代替?
相对宽度怎么样?
body {
width: 500%;
}
sektion {
width: 20%;
}
对 5 个 sektion 来说效果很好。至少在 Chrome 中是这样。