html - zurb 基础 block 网格和均衡器

Question

尝试获取 zurb 基础 block 网格以使子元素均衡....

<ul class="small-block-grid-1 medium-block-grid-3 large-block-grid-3"  data-equalizer>
  <li>
    <h3><a href="/about/">About Company</a></h3>
    <img src="/images/image.jpg" width="100%" alt="">
    <p data-equalizer-watch>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <a href="/about" class="button expand">Read more</a>
  </li>
  <li>
    <h3><a href="/about/">About Company</a></h3>
    <img src="/images/image.jpg" width="100%" alt="">
    <p data-equalizer-watch>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <a href="/about" class="button expand">Read more</a>
  </li>
  <li>
    <h3><a href="/about/">About Company</a></h3>
    <img src="/images/image.jpg" width="100%" alt="">
    <p data-equalizer-watch>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <a href="/about" class="button expand">Read more</a>
  </li>
  <li>
    <h3><a href="/about/">About Company</a></h3>
    <img src="/images/image.jpg" width="100%" alt="">
    <p data-equalizer-watch>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <a href="/about" class="button expand">Read more</a>
  </li>
  <li>
    <h3><a href="/about/">About Company</a></h3>
    <img src="/images/image.jpg" width="100%" alt="">
    <p data-equalizer-watch>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <a href="/about" class="button expand">Read more</a>
  </li>
  <li>
    <h3><a href="/about/">About Company</a></h3>
    <img src="/images/image.jpg" width="100%" alt="">
    <p data-equalizer-watch>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <a href="/about" class="button expand">Read more</a>
  </li>
  <li>
    <h3><a href="/about/">About Company</a></h3>
    <img src="/images/image.jpg" width="100%" alt="">
    <p data-equalizer-watch>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <a href="/about" class="button expand">Read more</a>
  </li>
  <li>
    <h3><a href="/about/">About Company</a></h3>
    <img src="/images/image.jpg" width="100%" alt="">
    <p data-equalizer-watch>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <a href="/about" class="button expand">Read more</a>
  </li>
</ul>

因为它们流向多条线，所以它们的高度似乎不相等。我的理想是让第一行“li”中的段落文本具有相同的高度，然后第二行“li”中的段落文本具有相同的高度......但我也会满足于他们所有行的高度都相同!

Answer 1

我更新了你的 fiddle :

Fiddle

您需要在您的 js 中添加此代码:

    $(document).foundation({
equalizer: {
equalize_on_stack: true
}
});

和你的CSS:

li{
    position:relative;

}
p{
    padding-bottom:60px;
}
.panel>:last-child{
    position:absolute;
    bottom:10px;
}