zurb-foundation-5 - Zurb Foundation 5 跨列均衡器

Question

我有一个 3 列的行。在每一列上，我都有一个缩略图 div、一个标题 div 和一个详细信息 div。我可以使用均衡器使所有列具有相同的高度，但我想做的是让所有标题 div 在同一行中具有相同的高度，以便所有内容都可以很好地排列。

我创建了一个代码笔和一个屏幕截图。任何帮助，将不胜感激。

http://codepen.io/renny/pen/VLNZRx

 <div class="row">
  <div class="small-12 medium-12 columns">
    <div class="row" data-equalizer="row1">
      <div class="grid-item small-12 medium-4 large-4 columns" data-equalizer-watch="row1">
        <article class="tease tease-event">
          <div class="thumbnail">
            <img src="http://placehold.it/300x200" alt="">
          </div>
          <div class="title">
                    <a href="#">Event Banana</a>
          </div>
          <div class="details">
            <ul class="no-bullet">
                <li>
                    Date: Mon 12 Oct 3:00pm  to 4:00pm
                </li>
                <li>
                    Location: My Place
                </li>
                <li>
                    Eventbrite: https://www.eventbrite.co.uk/e/unusual-test-tickets-18079722938
                </li>
            </ul>
          </div>
        </article>
      </div>
      <div class="grid-item small-12 medium-4 large-4 columns" data-equalizer-watch="row1">
        <article class="tease tease-event">
          <div class="thumbnail">
            <img src="http://placehold.it/300x200" alt="">
          </div>
          <div class="title">
            <a href="#">Monday Event Number 2, with quite a long title, let's see how we manage to make it fit</a>
          </div>
          <div class="details">
            <ul class="no-bullet">
                <li>
                    Date: Mon 12 Oct 3:00pm  to 4:00pm
                </li>
                <li>
                    Location: My Place
                </li>
                <li>
                    Eventbrite: https://www.eventbrite.co.uk/e/unusual-test-tickets-18079722938
                </li>
            </ul>
          </div>
        </article>
      </div>
      <div class="grid-item small-12 medium-4 large-4 columns" data-equalizer-watch="row1">
        <article class="tease tease-event">
          <div class="thumbnail">
            <img src="http://placehold.it/300x200" alt="">
          </div>
          <div class="title">
            <a href="#">Voluptatem vel facere illum quaerat similique deleniti</a>
          </div>
          <div class="card-content">
            <ul class="no-bullet">
                <li>
                    Date: Mon 12 Oct 3:00pm  to 4:00pm
                </li>
                <li>
                    Location: My Place
                </li>
                <li>
                    Eventbrite: https://www.eventbrite.co.uk/e/unusual-test-tickets-18079722938
                </li>
            </ul>
          </div>
        </article>
      </div>
    </div>
  </div>
</div>

谢谢！

Answer 1

在主 div 上放置一个均衡器属性，并像这样观察单个标题 div（为简洁起见，省略大部分代码）：

<div class="row" data-equalizer="title"> <-- this is your main div just before the first small-12
    ...rest of your code goes here

    <div class="title" data-equalizer-watch="title"> <-- add watch on each of the title divs
        <a href="#">Event Banana</a>
    </div>

    ...rest of your code goes here

    <div class="title" data-equalizer-watch="title">
        <a href="#">Monday Event Number 2, with quite a long title, let's see how we manage to make it fit</a>
    </div>

    ...rest of your code goes here

    <div class="title" data-equalizer-watch="title">
        <a href="#">Voluptatem vel facere illum quaerat similique deleniti</a>
    </div>

</div>

*使用 v5.5.2 测试