0

如何使这些 imgs 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;
}

编辑

好的，现在我得到了你想要的。你的代码之前没问题。您试图将 14 张图片分成 2 行，每行 5 张图片。是对的吗？

您应该将图像数量减少到 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 回答