zurb 基础块网格和均衡器

Question

试图让zurb基础块网格让子元素均衡....

<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's中的段落文本具有相同的高度，然后第二行'li's中的段落文本具有它们自己相同的高度......但我也会满足于他们所有行的高度都相同！

Answer 1

我更新了你的小提琴：

Fiddle

你需要在你的js中添加这段代码：

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

还有你的 CSS：

li{
    position:relative;

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