在div中包装图像

Question

我正在使用以下CSS并排显示图片：

#gallery {
    background-color: #444;
    padding: 10px;
    width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
    border: 5px solid #3e3e3e;
    border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
    border: 5px solid #fff;
    border-width: 5px 5px 20px;
    color: #fff;
}
#gallery ul a:hover { color: #fff; }

以上css的html代码是：

<div id="gallery">
    <ul>
        <li>
            <a href="photos/image1.jpg" title="">
                <img src="photos/thumb_image1.jpg"/>
            </a>
        </li>
        <li>
            <a href="photos/image2.jpg" title="">
                <img src="photos/thumb_image2.jpg">
            </a>
        </li>
</div>

一切正常，但有时候我会显示20到30张图片，这会使页面很长。有没有办法将所有这些添加到一边，以便整个页面不会变大，并在包含所有图像的容器周围添加滚动条？

Answer 1

不确定为什么你不希望你的页面变得“长”但你可以给div一个特定的高度并将其溢出设置为auto，这样当页面保持“短”时div就会滚动。

Answer 2

1. 不要这样做。只需让页面很长，并确保将有趣的东西放在顶部。我的浏览器有一个滚动条，我更喜欢使用它。

2. 如果您必须...... this可以接受。