html - 圆形缩略图对齐

Question

我实现了一种圆形缩略图，但问题是当我的圆形缩略图转到下一行/行时，如果缩略图描述的文本长度不同，它就会开始出现白色间隙。

html:

<h2 class="border-bottom">Services</h2>

    <div class="row">
      <article class="service col-sm-3">
      <img class="img-circle" src="images/service-1.png" alt="Icon">
      <h3>CONSULTANCY</h3>
      <p class="service-text">Understanding and addressing organizations’ needs</p>
    </article>

    <article class="service col-sm-3">
      <img class="img-circle" src="images/service-2.png" alt="Icon">
      <h3>IMPLEMENTATION</h3>
      <p class="service-text">Identifying, Identifying, Identifying, training and supporting</p>
    </article>
....

Answer 1

当您将不同高度的 float 元素换行到下一行时，就会发生这种情况。您需要做的就是制作一个新的 .row对于每一行，或添加 <div class="clearfix"></div>在每一整行之后。不需要 JS，bootstap 可以自行处理。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<div class="row">
    <article class="service col-xs-3">
      <img class="img-circle" src="https://placekitten.com/100/100" alt="Icon">
      <h5>CONSULTANCY</h5>
      <p class="service-text">Understanding and addressing organizations’ needs</p>
    </article>

    <article class="service col-xs-3">
      <img class="img-circle" src="https://placekitten.com/100/100" alt="Icon">
      <h5>IMPLEMENTATION</h5>
      <p class="service-text">Identifying, Identifying, Identifying, training and supporting</p>
    </article>
    <article class="service col-xs-3">
      <img class="img-circle" src="https://placekitten.com/100/100" alt="Icon">
      <h5>Foo</h5>
      <p class="service-text">short text</p>
    </article>

    <article class="service col-xs-3">
      <img class="img-circle" src="https://placekitten.com/100/100" alt="Icon">
      <h5>Bar</h5>
      <p class="service-text">short text</p>
    </article>
    
    <div class="clearfix"></div>
    
    <article class="service col-xs-3">
      <img class="img-circle" src="https://placekitten.com/100/100" alt="Icon">
      <h5>CONSULTANCY</h5>
      <p class="service-text">Understanding and addressing organizations’ needs</p>
    </article>

    <article class="service col-xs-3">
      <img class="img-circle" src="https://placekitten.com/100/100" alt="Icon">
      <h5>IMPLEMENTATION</h5>
      <p class="service-text">Identifying, Identifying, Identifying, training and supporting</p>
    </article>
    <article class="service col-xs-3">
      <img class="img-circle" src="https://placekitten.com/100/100" alt="Icon">
      <h5>CONSULTANCY</h5>
      <p class="service-text">Understanding and addressing organizations’ needs</p>
    </article>

    <article class="service col-xs-3">
      <img class="img-circle" src="https://placekitten.com/100/100" alt="Icon">
      <h5>IMPLEMENTATION</h5>
      <p class="service-text">Identifying, Identifying, Identifying, training and supporting</p>
    </article>
</div>