javascript - 横向内容

Question

我的问题是如何使动态内容水平显示。这意味着没有垂直滚动，只有水平滚动。我已经尝试过-webkit-column-count，但它只创建 X 列，而不是水平滚动。有什么建议么？

Answer 1

类似这个演示的东西（仅 HTML 添加 CSS）

演示：http: //jsfiddle.net/enve/ea88y/

来自：http: //www.visibilityinherit.com/code/horizo ​​ntal- website.php

HTML

<ul>
<li><a href="#one">ONE</a></li>
<li><a href="#two">TWO</a></li>
<li><a href="#three">THREE</a></li>
<li><a href="#four">FOUR</a></li>
<li><a href="#five">FIVE</a></li>
</ul>

<div id="wrap">
<div id="one"><p>ONE</p></div>
<div id="two"><p>TWO</p></div>
<div id="three"><p>THREE</p></div>
<div id="four"><p>FOUR</p></div>
<div id="five"><p>FIVE</p></div>
</div>

</body>
</html>​

CSS

 * {
margin:0;
padding:0;
}
html {
height:100%;
overflow-x:scroll;
}
body {
height:100%;
}
#wrap {
min-height:100%;
width:500%;
overflow:hidden;
}
#one, #two, #three, #four, #five {
width:20%;
float:left;
}
ul {
position:fixed;
width:100%;
height:40px;
line-height:40px;
text-align:center;
background:#ccc;
}
li {
display:inline;
margin:0 50px;
}
p {
margin:50px;
text-align:center;
}
* html ul {position:absolute;left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');} 
* html {background:url(fake.jpg)}
* html #full {height:100%;}​

Answer 2

您可以使用 CSS

white-space: nowrap;

但是你必须小心在你想要的地方放置换行符，否则你最终会得到一个非常长的文本行。http://jsfiddle.net/Nbkj2/1/

Answer 3

这是一个非常开放的问题，因为我确信有很多方法可以回答这个问题，但也许这会为您指明一个有用的方向：http ://www.sitepoint.com/side-scrolling-site-带有 css 和 jquery 的布局/

总结这篇文章，你将你的内容分成一系列全屏页面。每个页面都是一个带有 CSS 的 div，占据整个屏幕，具有高度/宽度属性，float:left;并使它们全部横向堆叠。为了防止页面换行，您使文档正文与您制作的所有页面一样宽：body { width:10000px; }

然后作者将一些 javascript 处理程序放在链接上，以将页面横向滚动到每个内容面板。

Answer 4

取决于什么元素以及水平的含义。这是我认为你的意思的两个例子。

div { 
    Width:20%;
    Display:inline-block; //won't work for ie 8 and below
}
body {
    width: 150%;
}