div邊框底部與東西重疊

我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 
       } 
      }] 
    });

JSFiddle

來源

2017-06-23 soheil

這是因爲您的div的margin-top，margin-left和margin-right設置爲20px，但沒有類似的margin-bottom規則。 – Pyromonk

@Pyromonk哦，你是對的！ – soheil

只需設置margin-bottom爲y我們的.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

來源

2017-06-23 12:11:00

小提琴：從各個側面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; 
}

來源

2017-06-23 12:14:48 gauravmuk

div邊框底部與東西重疊

回答

相關問題