横向内容

Question

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

Answer 1

您可以使用CSS

white-space: nowrap;

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

Answer 2

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

总结一下这篇文章，您将内容分解为一系列全屏页面。每个页面都是带有CSS的div，占据整个屏幕，具有高度/宽度属性和float:left;，使它们全部叠加在一起。为了防止页面被包装，您可以使文档正文与您创建的所有页面一样宽：body { width:10000px; }

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

Answer 3

取决于哪个元素和你的意思是横向的。这是我认为你的意思的两个例子。

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

Answer 4

像这个演示（HTML仅添加CSS）

DEMO： http://jsfiddle.net/enve/ea88y/

FROM：http://www.visibilityinherit.com/code/horizontal-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%;}​