div边框底部与某物重叠。

Question

我是一个内容丰富的div，我给了它box-shadow。一切都很好，直到我用slick slider制作了那个slick slider滑块。现在我的问题是，在使用滑块后，div的底部阴影没有显示，我猜它是与某些东西重叠的。我应用了很多改变，但没有好处！我怎么才能解决呢？以下是我的最小代码：

HTML：

<div id="recent-posts" class="col-md-8 col-sm-10 col-sm-offset-1 col-md-offset-2 col-xs-10 col-xs-offset-1 ">
            <div class="posts">
                <div class="posts-div">
                    <div class="img-hover">
                        <img src="images/post1.jpg" class="img-responsive">

                        </div>
                    </div>

            </div>
            <div class="posts">
                <div class="posts-div">
                    <div class="img-hover">
                        <img src="images/post2.jpg" class="img-responsive">

                        </div>
                    </div>

            </div>
            <div class="posts">
                <div class="posts-div">
                    <div class="img-hover">
                        <img src="images/post3.jpg" class="img-responsive">

                        </div>
                    </div>

            </div>
            <div class="posts">
                <div class="posts-div">
                    <div class="img-hover">
                        <img src="images/post4.jpg" class="img-responsive">

                        </div>
                        </div>
            </div>
        </div>

CSS：

#recent-posts{
    /*height: 350px;*/
    /*display: flex;*/
    /*justify-content: center;*/
    position: relative;
    /*flex-wrap: wrap;*/
    margin-bottom: 100px;
}
.posts{
    display: flex;
    flex-direction: column;
    max-height: 375px;
    margin-top: 20px;
    position: relative;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #888888;
    margin-left: 20px;
    margin-right: 20px;
}
.posts img{
    width: 100%;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    max-height: 200px;
    min-height: 200px;
}

剧本：

$('#recent-posts').slick({
        dots: false,
        slidesToShow: 2,
        slidesToScroll: 1,
        infinite: true,
        responsive:[
            {
                breakpoint: 770,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    dots: false
                }
            }]
    });

JSFiddle

Answer 1

只需将margin-bottom设置为.posts元素，以获得从父div溢出的一些底部保证金。

.posts{
    display: flex;
    flex-direction: column;
    max-height: 375px;
    margin-top: 20px;
    position: relative;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #888888;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom:20px; //this here
}

更新小提琴

Answer 2

小提琴：https://jsfiddle.net/j8upvh3c/4/

从各方面设置保证金20 fix应解决此问题。你申请的是上、右、左但不是底。

.posts{
    margin: 20px;
    display: flex;
    flex-direction: column;
    max-height: 375px;
    position: relative;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #888888;
}