不能让div溢出才能正常工作

Question

我希望有人可以帮助我解决我遇到的问题。我试图设置一系列照片。这有CSS / HTML属性：

http://jsfiddle.net/i_like_robots/7GvV2/embedded/result%2chtml%2ccss/

    /*
 * Housekeeping
 */
body {
    font: normal 16px/1.5 Arial, sans-serif;
}

h1, p {
    margin: 0;
    padding: 0 0 .5em;
}

.container {
    margin: 0 auto;
    max-width: 480px;
}

/*
 * Caption component
 */
.caption {
    position: relative;
    overflow: hidden;

    /* Only the -webkit- prefix is required these days */
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}

.caption::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    transition: background .35s ease-out;
}

.caption:hover::before {
    background: rgba(0, 0, 0, .5);
}

.caption__media {
    display: block;
    min-width: 100%;
    max-width: 100%;
    height: auto;
}

.caption__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    color: white;

    -webkit-transform: translateY(100%);
            transform: translateY(100%);

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.caption:hover .caption__overlay {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.caption__overlay__title {
    -webkit-transform: translateY( -webkit-calc(-100% - 10px) );
            transform: translateY( calc(-100% - 10px) );

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.caption:hover .caption__overlay__title {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

我实际上从这个网站获得了代码。

但是会有超过30张照片，所以我希望将它们放在一个大约400h x 700w px的滚动框/区域内。当我通过HTML或CSS添加滚动框时，结果是相同的。有一个盒子，没有滚动。并且所有照片都缩小了以适应盒子内部。

任何人都可以帮我这个吗？

感谢。

Answer 1

我已经完成的工作是移除了.container元素的CSS，以防您希望将其保留用于其他目的，并添加了.scroller元素作为图片的包装器（在.container内）。如果您不再使用.container，则可以使用.scroller替换CSS中的.container，并删除我添加到HTML中的.container。有点罗嗦，所以如果你需要一个更简单的解释，请告诉我。

因此，HTML会发生变化，因为<div>元素周围有scroller个新的<article>。

CSS添加了.scroller类，另一条规则只是将图像分开一点：

.scroller{
    margin:0px auto;
    height:400px;
    max-height:400px;
    width:700px;
    max-width:700px;
    padding:10px 20px;
    border:1px solid #aaa;
    overflow-y:scroll;
}
.scroller article:not(:last-child){
    margin-bottom:10px;
}

小提琴：http://jsfiddle.net/435rx66s/

Answer 2

这个滚动框/区域是什么？

您已向我们提供了您在实施中引用的代码，但我们的实施位置供我们参考？

如果要在该容器中创建更多文章，则给定代码可以正常工作。给容器一个固定的高度并将overflow设置为auto，将这些内容放在滚动框中应该没有问题。

https://jsfiddle.net/i_like_robots/7GvV2/

.container {
    height:200px;
    overflow:auto;
    position:relative;
    margin: 0 auto;
    max-width: 480px;
}

Answer 3

如果你对jquery有点开放，那就是一个非常简单的解决方案。

一个简短的jquery函数

$("#container > article:gt(0)").hide();

setInterval(function () {
    $('#container > article:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#container');
}, 3000);

将依次显示您的文章。

$("#container > article:gt(0)").hide();

setInterval(function () {
    $('#container > article:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#container');
}, 3000);

/*
 * Housekeeping
 */
body {
    font: normal 16px/1.5 Arial, sans-serif;
}

h1, p {
    margin: 0;
    padding: 0 0 .5em;
}

#container {
    margin:0 auto;
    max-width: 480px;
    max-height:240px;
   overflow:hidden;
}



/*
 * Caption component
 */
.caption {
    position: relative;
    overflow: hidden;

    /* Only the -webkit- prefix is required these days */
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}

.caption::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    transition: background .35s ease-out;
}

.caption:hover::before {
    background: rgba(0, 0, 0, .5);
}

.caption__media {
    display: block;
    min-width: 100%;
    max-width: 100%;
    height: auto;
}

.caption__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    color: white;

    -webkit-transform: translateY(100%);
            transform: translateY(100%);

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.caption:hover .caption__overlay {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.caption__overlay__title {
    -webkit-transform: translateY( -webkit-calc(-100% - 10px) );
            transform: translateY( calc(-100% - 10px) );

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.caption:hover .caption__overlay__title {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

article{max-width:480px; max-height:240px; overflow:hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="container">

    <article class="caption">
        <img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
        <div class="caption__overlay">
            <h1 class="caption__overlay__title">Alaska</h1>
            <p class="caption__overlay__content">
                Alaska is a U.S. state situated in the northwest extremity of the North American continent. Bordering the state is Canada to the east, the Arctic Ocean to the north, and the Pacific Ocean to the west and south, with Russia (specifically, Siberia) further west across the Bering Strait.
            </p>
        </div>
    </article>

        <article class="caption">
        <img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
        <div class="caption__overlay">
            <h1 class="caption__overlay__title">Michigan</h1>
            <p class="caption__overlay__content">
               Some dummy text for testing
            </p>
        </div>
    </article>

    </div>
  

</div>