Question

我有一个3列的行。在每列上我有一个缩略图div，一个标题div和一个细节div。我可以使用均衡器使所有列具有相同的高度，但我想要做的是让所有标题div在同一行中具有相同的高度，这样一切都可以很好地排列。

我创建了一个codepen和一个截图。任何帮助将不胜感激。

 <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测试

Zurb Foundation 5 Equalizer跨列

1 个答案: