圆形缩略图对齐

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

当您将不同高度的浮动项目包裹到下一行时，就会发生这种情况。您需要做的就是为每一行创建一个新的.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>

Answer 2

您需要为组件添加高度，因为我可以看到问题是由于高度不一致而导致的，您需要将相同的高度应用于将解决您的问题的所有组件。您可以通过 css 应用它，也可以使用 jquery 计算最大 div 的高度并应用于休息。

使用这个 jQuery 在你有服务 col-sm-3 的地方添加“same-height”类，这样它就不会与其他组件冲突。

$(document).ready(function() {
    var maxHeight = -1;
    $('.same-height').each(function() {
      maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
    });
    $('.same-height').each(function() {
      $(this).height(maxHeight);
    });
});

查看演示链接http://jsfiddle.net/ghayes/fqMK6/4/

巧合的是，我昨天为您的参考 Div is mysteriously moving down after displaying first 3 rows properly 的同一问题添加了相同的答案