javascript - 水平方向のコンテンツ

Question

私の質問は、動的コンテンツを水平に表示する方法です。これは、垂直スクロールではなく、水平スクロールのみを意味します。試してみ-webkit-column-countましたが、X 列のみが作成され、水平スクロールは作成されません。助言がありますか？

Answer 1

CSSを使用できます

white-space: nowrap;

ただし、必要な場所に改行を入れるように注意する必要があります。そうしないと、1行の非常に長いテキストになってしまいます。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

水平方向の要素と意味によって異なります。これが私があなたが言っていると思うことの2つの例です。

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

Answer 4

このデモのようなもの (HTML は CSS のみを追加)

デモ: http://jsfiddle.net/enve/ea88y/

FROM: 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%;}​