Zurb foundation ZURB基金会（用JSFIDLE）为什么空div /单元格的行高不匹配行的其余部分？

在这里的示例中：我希望（并且希望！）看到两个空的边单元格（“small-2 columns menuHeader”）与整行的高度匹配。为什么不发生这种事

    <div class="row">
        <div class="small-2 columns menuHeader">&nbsp;</div>
        <div class="small-8 columns menuHeader">
            <div class="row">
                <div class="small-4 columns text-left">
                    <img src="http://placehold.it/150x80&text=Image 1" />
                    </div>
                <div class="small-4 columns text-left">
                    <img src="http://placehold.it/150x80&text=Image 2" />
                    </div>
                <div class="small-4 columns text-left">
                    <img src="http://placehold.it/150x80&text=Image 3" />
                    </div>
            </div>
        </div>
        <div class="small-2 columns menuHeader">&nbsp;</div>
    </div>

---

大量的实验导致将其封装在一个12列的div中，这很好：

    <div class="row">
        <div class="small-12 columns menuHeader">
            <div class="row">
                <div class="small-2 columns">&nbsp;</div>
                <div class="small-8 columns">
                    <div class="row">
                        <div class="small-4 columns text-left">
                            <img src="http://placehold.it/150x80&text=Image 1" />
                            </div>
                        <div class="small-4 columns text-left">
                            <img src="http://placehold.it/150x80&text=Image 2" />
                            </div>
                        <div class="small-4 columns text-left">
                            <img src="http://placehold.it/150x80&text=Image 3" />
                            </div>
                    </div>
                </div>
                <div class="small-2 columns">&nbsp;</div>
            </div>
        </div>
    </div>

也许您还可以将一个类添加到空列

empty

中，然后在

onload

中设置这些列的高度。我个人也有类似的问题，但不需要背景效果，所以我定义了一个空类

empty{minheight:1px；}

。这样，您就不需要额外的包装行，也不需要将

放入空列中。当时我很想保留css的“香草”，而不是添加我自己的花洒；-）