Удержание блоков на одной линии внутри сетки YUI - PullRequest
Новая
       30

Удержание блоков на одной линии внутри сетки YUI

0 голосов
/ 13 февраля 2009

Когда у меня есть сетка с небольшим содержимым в блоке 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>

1 Ответ

1 голос
/ 17 февраля 2009

Div yui-b плавающие, но не были очищены. По сути это означает, что им нечего сказать ниже , какие элементы перемещать, оставляя их вертикально сложенными, как видно.

Установка clear:both на втором yui-b div исправляет это.

...