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; 
}