無法使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。 有點羅word，所以如果您需要更簡單的解釋，請告訴我。

因此，HTML發生了變化，新的<div>帶有圍繞<article>元素的類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

這個滾動框/區域是什么？

您已將在實現中引用的代碼提供給我們，但是您的實現可供我們參考？

如果您要在該容器中創建更多文章，則給定的代碼會很好地工作。 將容器設置為固定高度，並將溢出設置為自動，將內容放置在滾動框中應該沒有問題。

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 US 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>