Question

如果我的网格布局在yui-main块中的内容很少，那么一些侧边栏（在我的情况下是yui-main之外的那些）会跳转到主块下面。

以下是此问题的an example page（如果文件不再存在，则为a pastebin'd source。）

实施例

这个工作正常，因为#yui-main中的内容比其外部的内容长：

<div id="bd">
    <div id="yui-main">
        <div class="yui-b">
            <h2>Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque.</p>
        </div>
        <div class="yui-b">
            <h2>Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque.</p>
        </div>
    </div>

    <div class="yui-b">
        <h2>Delors sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque. </p>
    </div>
</div>

但是这个没有，因为yui-main之外的内容比其内部的内容长。因此它在yui-main下面溢出。

<div id="bd">
    <div id="yui-main">
        <div class="yui-b">
            <h2>Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque.</p>
        </div>
    </div>

    <div class="yui-b">
        <h2>Delors sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque. </p>
    </div>

    <div class="yui-b">
        <h2>Delors sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero vitae tellus rhoncus malesuada. Ut tempor ipsum vel orci. Maecenas nec nibh. Aenean sed nisi. In hac habitasse platea dictumst. Etiam augue. Curabitur et felis non tortor commodo porta. Vivamus bibendum viverra tellus. Aliquam erat volutpat. Vestibulum in turpis. Duis bibendum nunc ac lectus. Mauris mi. Mauris neque. </p>
    </div>
</div>

Answer 1

yui-b div是浮动的，但尚未清除。这实际上意味着没有什么可以告诉他们下面哪些元素要浮动，让它们垂直堆叠，如图所示。

在第二个clear:both div上设置yui-b可修复此问题。

将块保持在YUI网格内

实施例

1 个答案: