zurb基础块网格和均衡器
zurb基础块网格和均衡器
提问于 2015-07-15 08:50:18
试图获得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>因为它们流到多条线上，所以它们的高度似乎不相等。我的理想是在第一行的“李”中有段文字，第二行的“李氏”中的段落有相同的高度.但我也会满足他们，所有行的高度都一样！
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-07-15 09:17:19
我更新了你的小提琴：
小提琴
您需要在js中添加以下代码：
$(document).foundation({
equalizer: {
equalize_on_stack: true
}
});你的css：
li{
position:relative;
}
p{
padding-bottom:60px;
}
.panel>:last-child{
position:absolute;
bottom:10px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31425686
复制相关文章
相似问题
腾讯云开发者
