Question

我一直在寻找其他问题的解决方案，但我无法做到正确。我想在容器内部滚动一个div，但它要么不起作用，要么在容器内滚动标题：

JSFiddle * 请查看更新的jsfiddle与Jquery代码的结尾

HTML：

<div id="my_events" class="profilePopup">
    <div class="title_background">
        <h3>My Events</h3>
    </div>

            <div id="myEventsDetails_contaner">

                <div class="myEventsIcon">
                   <div class="eventDetails">
                   <a href="">
                   <img src=""width="70px">
                   <h5><span>12-02-2014</span></h5>
                   <h5>event</h5></a>
                </div>
              </div>

                <div class="myEventsIcon">
                   <div class="eventDetails">
                   <a href="">
                   <img src=""width="70px">
                   <h5><span>12-02-2014</span></h5>
                   <h5>event</h5></a>
                </div>
              </div>

                <div class="myEventsIcon">
                   <div class="eventDetails">
                   <a href="">
                   <img src=""width="70px">
                   <h5><span>12-02-2014</span></h5>
                   <h5>event</h5></a>
                </div>
              </div>
                 <div class="myEventsIcon">
                   <div class="eventDetails">
                   <a href="">
                   <img src=""width="70px">
                   <h5><span>12-02-2014</span></h5>
                   <h5>event</h5></a>
                </div>
              </div>

              <div class="myEventsIcon">
                   <div class="eventDetails">
                   <a href="">
                   <img src=""width="70px">
                   <h5><span>12-02-2014</span></h5>
                   <h5>event</h5></a>
                </div>
              </div>


    </div>
</div>

CSS：

#myEventsDetails_contaner{
    max-height: 100%;
}
.profilePopup{
    border: 1px solid black;
    background: #f8f8f8;
    z-index: 999;
    width: 400px;
    height: 200px;
    overflow:scroll;

}
.title_background{

    background: rgba(0,0,0,0.75);
    margin-bottom: 15px;
    padding:10px;
    position: relative;
}
.myEventsIcon{

    padding:10px;
    display: inline-block;
}

.eventDetails
{

    text-align: center;
}

.eventDetails h5 span{

    color:#ff1a00;
    display: block;
}

.eventDetails a{

    width:150px;
}

* 使用JQUERY CODE更新JSFIDDLE * * ** * ***

updated JSFiddle

Answer 1

将div title_background放在div profilePopup旁边。并将类title_background的css修改为

.title_background{   
    background: rgba(0,0,0,0.75);
    padding:10px;
    width: 382px;
}

这里是小提琴http://jsfiddle.net/U7AVL/

我的编辑代码

fiddele是http://jsfiddle.net/epLyC/

我认为这会对你有帮助......

标题滚动在容器内

1 个答案: