0

これらの画像を2行にし、ブラウザをオーバーフローさせて右にスクロールすると表示されるようにするにはどうすればよいですか？行3に変更しないでください。

http://jsfiddle.net/GW3rU/

    <div class="wp">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
    </div>

</ p>

CSS

.wp img{
    width:170px;
    height:170px;
}
.wp{
    height: 340px;/*make 2 row?*/
    width: 855px;/*5 column*/

    /*center horizontal*/
    position: absolute;
    margin-top: auto;
    margin-bottom: auto;
    top:0;
    bottom: 0;
}

</ p>

4

2 に答える 2

1

含めるoverflow-x: scroll:

.wp{
    height: 340px;/*make 2 row?*/
    width: 855px;/*5 column*/

    /*center horizontal*/
    position: absolute;
    margin-top: auto;
    margin-bottom: auto;
    top:0;
    bottom: 0;
    overflow-x: scroll;
}

編集

わかりました、今私はあなたが望むものを手に入れました。あなたのコードは以前は問題ありませんでした。それぞれ5枚の画像の2行に14枚の画像を入れようとしています。そうですか？

画像の数を 10 に減らすか、.wpdiv のサイズを 7 画像に増やすか、リストの途中で手動で改行する必要があります。ドキュメントはスクロールしますが、div はスクロールしません。

于 2012-11-12T17:12:49.590 に答える
0

コンテナのオーバーフローを x でスクロールするように設定します。

.wp{
height: 340px;/*make 2 row?*/
width: 855px;/*5 column*/

/*center horizontal*/
position: absolute;
margin-top: auto;
margin-bottom: auto;
top:0;
bottom: 0;
overflow-x: scroll;
}

http://jsfiddle.net/calder12/GW3rU/1/

于 2012-11-12T17:15:59.187 に答える