javascript - 无法让 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 , 并删除 .container我添加到 HTML 中。有点罗嗦，所以如果您需要更简单的解释，请告诉我。

所以 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;
}

fiddle :http://jsfiddle.net/435rx66s/