HTML + CSS div顯示錯誤

Question

N.B：我只是使用bootstrap列。 這是我的WordPress網站的自定義頁面。 問題的圖像： screen shoot for problem and what i want

這是我的代碼的html：

<div class="row"> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
     <img src="http://www.cheapwp.com/wp-content/uploads/2016/08/blog-481x230.jpg" alt="blog service"> 
     <div class="caption"> 
     <h3>Blog services</h3> 
     <p>We can create for you professional blog, or edit your blog, or other Services for it </p> 
     <p><a href="#" class="click" role="click">Check Now</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
     <img src="http://www.cheapwp.com/wp-content/uploads/2016/08/ForumLogo_FINAL_red.jpg" alt="Forum services"> 
     <div class="caption"> 
     <h3>Forum services</h3> 
     <p>We can create for you any type fo forums, or edit , or other Services for it </p> 
     <p><a href="#" class="click" role="click">Check Now</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
     <img src="http://www.cheapwp.com/wp-content/uploads/2016/08/landing-page-blog-marketeamos.jpg" alt="Landing page services"> 
     <div class="caption"> 
     <h3>Landing page services</h3> 
     <p>Landing page is our mession Contact us here </p> 
     <p><a href="#" class="click" role="click">Check Now</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
     <img src="http://www.cheapwp.com/wp-content/uploads/2016/08/564-315px.png" alt="Web hosting services help"> 
     <div class="caption"> 
     <h3>Web hosting services help</h3> 
     <p>We can help you to choose best hosting ever for your need</p> 
     <p><a href="#" class="click" role="click">Check Now</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
     <img src="http://www.cheapwp.com/wp-content/uploads/2016/08/empresas-de-hospedagem-web-480x240.jpg" alt="burchase web hosting or domain"> 
     <div class="caption"> 
     <h3>burchase web hosting or domain</h3> 
     <p>We can buy for You Good Hosting as your budget</p> 
     <p><a href="#" class="click" role="click">Check Now</a></p> 
     </div> 
    </div> 
    </div> 
</div> 

，這是CSS代碼：

.thumbnail{ 
    border:1px solid #c1c1c1; 
    padding: 4px; 
    margin-bottom:20px; 
    float: left; 
    display: block; 
    position: relative; 
} 
.click { 
    background-color: #44ccf2; 
    border-radius: 2px; 
    color: #ffffff !important; 
    padding: 15px 32px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    margin: 4px 2px; 
    cursor: pointer; 
} 
.click:hover { 
    background-color: #2f3c4e; 
    border-radius: 2px; 
    color: #ffffff !important; 
    padding: 15px 32px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    margin: 4px 2px; 
    cursor: pointer; 
} 

請幫助我，我不能沒有你解決 感謝

Answer 1

您可以將.thumbnail從display: block更改爲顯示：inline-block並刪除float: left。此外，您將需要從.col類刪除float，並更改爲display: inline-block;

Answer 2

嘗試此操作，刪除浮動左側並替換顯示內嵌塊以flex。

.thumbnail{ 
    border:1px solid #c1c1c1; 
    padding: 4px; 
    margin-bottom:20px; 
    display: flex; 
    position: relative; 
}