42

水平スクロールを持つ id を使用したいのです<div>が、固定幅ではなく、応答性が必要です。

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

4

5 に答える 5

96

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

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

このようにして、div をできるだけ広くすることができるので、できるだけ多くのキティ画像を追加できます;3

div の幅は、含まれる子要素に基づいて拡張されます。

jsフィドル

于 2013-10-08T19:57:21.437 に答える
1

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

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

于 2013-10-08T19:55:21.333 に答える
0

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

max-width:530px;

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

于 2013-10-08T19:55:54.367 に答える