html - CSS有图像的div穿过并滚动

Question

我有一个包含图像的 div，我想做的是让图像一直显示并让用户能够滚动浏览它们……我希望这是有道理的。这是我的代码:

<div id="gallerySet1">
                <img src="images/1.2.jpg">
                <img src="images/1.3.jpg">
                <img src="images/1.4.jpg">
                <img src="images/1.5.jpg">
                <img src="images/1.6.jpg">
                <img src="images/1.7.jpg">
                <img src="images/1.8.jpg">
                <img src="images/1.9.jpg">
                <img src="images/1.10.jpg">
                <img src="images/1.11.jpg">
                <img src="images/1.12.jpg">
            </div>

和CSS:

            #gallerySet1{
    display:none;
    z-index:1000000;
    position:absolute;
    top:1500px;
}

#gallerySet1 img{
    float:left;


height:400px;
}

我正在尝试这样显示我的图像:

http://annasafroncik.it/#galleria (点击 3 张图片中的一张)

Answer 1

您需要使用第二个 div 来包装所有元素(这也是幻灯片的工作方式)。如果您严格使用 css，则需要确保 min-width == 图像的总宽度。如果你想让它更动态一点，你可能想使用一些 JavaScript/jQuery 来计算所有图像的宽度，并将 .wrapper 的宽度设置为该宽度(我已经包含了).

DEMO

HTML:

<div id="gallerySet1">
    <div class="wrapper">
        <img src="http://placekitten.com/300/300">
        <img src="http://placekitten.com/100/300">
        <img src="http://placekitten.com/400/300">
        <img src="http://placekitten.com/240/300">
        <img src="http://placekitten.com/100/300">
        <img src="http://placekitten.com/40/300">
        <img src="http://placekitten.com/300/300">
        <img src="http://placekitten.com/200/300">
        <img src="http://placekitten.com/100/300">
        <img src="http://placekitten.com/200/300">
        <img src="http://placekitten.com/200/300">
    </wrapper>
</div>

CSS:

#gallerySet1 {
    width: 600px;
    height: 300px;
    overflow-x: scroll;
}
.wrapper {
    min-width: 2200px;
}
.wrapper:after {
    clear: both;
    content:'';
    display: table;
}
img {
    float: left;
}

jQuery:

$(document).ready(function () {
    var imgs = $('img'),
        width = 0,
        wrapper = $('.wrapper');

    imgs.each(function (index) {
        width += $(this).width();
    });

    wrapper.width(width);
});