我a div
这是充满了内容,我给了它box-shadow
。一切都很好,直到我使用slick slider
制作div
滑块。现在我的问题是,使用slik滑块后,div的底部阴影不显示,我想它与某些东西重叠。我应用了许多变化,但没有任何好处我该如何解决这个问题?以下是我很少的代码: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
}
}]
});
这是因为您的div的margin-top,margin-left和margin-right设置为20px,但没有类似的margin-bottom规则。 – Pyromonk
@Pyromonk哦,你是对的! – soheil