html - zurb基础模块网格和均衡器

试图获得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”中的段落文本具有相同的高度，然后第二行“li”中的段落文本具有相同的高度。。。。但我也会满足于他们所有的行都有同样的高度！

最佳答案

我更新了你的小提琴：
Fiddle
您需要在js中添加以下代码：

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

以及你的css：

li{
    position:relative;

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

关于html - zurb基础模块网格和均衡器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31425686/