0

ブロック内のコンテンツがほとんどないグリッド レイアウトがあるyui-main場合、サイドバー ブロックの一部 (私の場合は の外側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 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>
4

1 に答える 1

1

yui-bdivはフローティングですが、クリアされていません。これは本質的に、どの要素の下に浮かぶかを伝えるものが何もないことを意味し、見られるようにそれらを垂直に積み重ねたままにします。

clear:both2番目のyui-bdivに設定すると、これが修正されます。

于 2009-02-17T09:05:05.667 に答える