基础5 - 均衡器,高度=“继承”问题

时间:2016-01-04 21:57:58

标签: javascript css zurb-foundation zurb-foundation-5

我正在使用带有嵌套均衡器的均衡器来制作一个带有嵌套<h2>对象的文章对象,网格布局中的高度相同。

因此所有<article>元素的高度相同,文章中的所有<h2>元素都具有相同的高度。 http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html

只要网格布局没有扩展到第二行,一切正常,均衡器可以做到。

Image 1

但第二个网格布局扩展到第二行均衡器将高度设置为

  

高度= “继承”

<article><h2>(文章中)元素都失去了相同的高度。

Image 2

我还尝试将h2元素放在div元素中,并在此处使用data-equalizer-watch="sub2",但结果相同。

<div id="siteContent" class="row" data-equalizer="sub1">
    <div data-equalizer="sub2">
        <div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
            <a href="#">
                <article>
                    <time datetime="2015-12-31" pubdate="pubdate"></time>
                    <h2 data-equalizer-watch="sub2">Super long headline if u believe. Let the force guide you</h2>
                    <div>
                        <p>News category<span> <span>2015-12-31</span></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget quam interdum, elementum tellux asdasd asasdasdasda , elementum tellux asdasd asasdasdasda</p>
                    </div>
                </article>
            </a>
        </div>
        <div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
            <a href="#">
                <article>
                    <time datetime="2015-12-31" pubdate="pubdate"></time>
                    <h2 data-equalizer-watch="sub2">headline</h2>
                    <div>
                        <p>News category<span> <span>2015-12-31</span></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget quam interdum, elementum tellux asdasd asasdasdasda , elementum tellux asdasd asasdasdasda</p>
                    </div>
                </article>
            </a>
        </div>
        <div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
            <a href="#">
                <article>
                    <time datetime="2015-12-31" pubdate="pubdate"></time>
                    <h2 data-equalizer-watch="sub2">headline</h2>
                    <div>
                        <p>News category<span> <span>2015-12-31</span></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                </article>
            </a>
        </div>
        <div class="small-12 medium-6 large-4 columns panel articleFrontpage" data-equalizer-watch="sub1">
            <a href="#">
                <article>
                    <time datetime="2015-12-31" pubdate="pubdate"></time>
                    <h2 data-equalizer-watch="sub2">headline</h2>
                    <div>
                        <p>News category<span> <span>2015-12-31</span></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                </article>
            </a>
        </div>
    </div>
</div>

希望有人可以提供帮助

0 个答案:

没有答案