Question

在这里的示例中：http://jsfiddle.net/carled/bu2Dw/我希望（并且希望！）看到空的两个边单元格（“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>

Answer 1

许多实验导致将它包装在一个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>

Zurb Foundation（与jsFiddle）为什么空div / cell的行高与行的其余部分不匹配？

1 个答案: