Question

我div内容丰富，我给了box-shadow。在使用div创建slick slider滑块之前，一切正常。现在我的问题是在使用slik滑块后，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

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

从所有方面设置保证金20px应解决问题。你申请的是顶部，右边，左边但不是底部。

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

Answer 2

只需将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
}

<强> Updated fiddle

div border bottom与某些东西重叠

2 个答案: