web-dev-qa-db-ja.com

水平スクロールCSS

水平スクロールを持つidを持つ<div>が1つ必要ですが、問題は固定幅ではなく応答性でなければならないことです。

html, body {margin: 0; padding: 0;}

#myWorkContent{
    width:530px;
    height:210px;
    border: 13px solid #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

#myWorkContent a {
    display: inline-block;
    vertical-align: middle;
}

#myWorkContent img {border: 0;}

<div id="myWorkContent">
     <a href="assets/work/1.jpg"><img src="http://placekitten.com/200/200/" height="190"></a>
     <a href="assets/work/2.jpg"><img src="http://placekitten.com/120/120/"/></a>
     <a href="assets/work/3.jpg"><img src="http://placekitten.com/90/90/" height="90" width="90"></a>
     <a href="assets/work/4.jpg"><img src="http://placekitten.com/50/50/" height="190"></a>
     <a href="assets/work/5.jpg"><img src="http://placekitten.com/100/100/"></a>
     <a href="assets/work/6.jpg"><img src="http://placekitten.com/200/200/" height="190"></a>
</div><!-- end myWorkContent -->

http://jsfiddle.net/clairesuzy/FPBWr/ に感謝

問題はその530pxにあります。代わりに100％を使用したいと思います。しかし、私はページスクロールを取得し、DIVのスクロールがうまくいき、それを取得できない、何かアイデアはありますか？

ここにソリューションに関するセルビア語の記事があります http://www.blog.play2web.com/index.php?id=18

htmlcssoverflow
41
Miomir Dancevic

幅を自動に設定するだけです：

#myWorkContent{
    width: auto;
    height:210px;
    border: 13px solid #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

このように、divはできるだけ広くすることができるため、できるだけ多くの子猫画像を追加できます; 3

Divの幅は、それに含まれる子要素に基づいて拡大します。

jsFiddle

91
nkmol

以下は私のために働いた。

子の高さは親のスクロールの高さよりも大きいため、このような子を2つ使用すると水平にスクロールすることを示すために高さと幅が使用されます。

親CSS：

.divParentClass {
    width: 200px;
    height: 100px;
    overflow: scroll;
    white-space: nowrap;
}

子CSS：

.divChildClass {
    width: 110px;
    height: 200px;
    display: inline-block;
}

水平方向にのみスクロールするには：

overflow-x: scroll;
overflow-y: hidden;

垂直方向にのみスクロールするには：

overflow-x: hidden;
overflow-y: scroll;
11
Manohar Reddy Poreddy

box-sizing:border-box;に#myWorkContentを追加してください。

http://jsfiddle.net/FPBWr/160/

1
Giovanni Silveira

widthの代わりにmax-widthを使用します

max-width:530px;

デモ： http://jsfiddle.net/FPBWr/161/

0
user1

私はこのように考えました：

* { padding: 0; margin: 0 }
body { height: 100%; white-space: nowrap }
html { height: 100% }

.red { background: red }
.blue { background: blue }
.yellow { background: yellow }

.header { width: 100%; height: 10%; position: fixed }
.wrapper { width: 1000%; height: 100%; background: green }
.page { width: 10%; height: 100%; float: left }

<div class="header red"></div>
<div class="wrapper">
    <div class="page yellow"></div>
    <div class="page blue"></div>
    <div class="page yellow"></div>
    <div class="page blue"></div>
    <div class="page yellow"></div>
    <div class="page blue"></div>
    <div class="page yellow"></div>
    <div class="page blue"></div>
    <div class="page yellow"></div>
    <div class="page blue"></div>
</div>

ラッパーは1000％で、10ページはそれぞれ10％です。私はまだそれぞれがウィンドウの100％（色分け）である「ページ」を持つように設定しました。 800％のラッパーで8ページを実行できます。私はあなたが色を省くことができて、継続ページに持っていると思います。固定ヘッダーも設定しましたが、それは必要ありません。お役に立てれば。

0
user3662981