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。此外，您需要从float课程中删除.col并更改为display: inline-block;

Answer 2

试试这个，向左移除浮动并将显示内联块替换为flex。

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

Html + CSS div显示错误

2 个答案: