плавающие элементыв лучшем случае CSS? - PullRequest
Новая
       7

плавающие элементыв лучшем случае CSS?

5 голосов
/ 12 января 2011

У меня есть несколько плавающих элементов, таких как боковая панель, которая плавает помимо области содержимого.Если я не добавлю <br clear="both"/> в конце боковой панели, то нижний колонтитул и части фона получатся странными.

Любое быстрое решение, о котором я не подумал?

СпасибоВы.

Редактировать: Например, я хочу, чтобы на границах не было пропусков, а на заднем плане также не должно быть пробелов.Должны просто выглядеть как два раздела: 1) содержимое с боковой панелью 2) нижний колонтитул 

    <!DOCTYPE html>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>layout</title>

    <style type="text/css">

    body {
        margin:0;
        padding:0;
    }

    #main {
        background:#cfcfcf;
    }

    .inner {
        margin: 0 auto;
        padding: 96px 72px 0;
        width: 1068px;
        border-color: #000;
        border-style: solid;
        border-width: 0 1px;
        color: #3C3C3C;
    }

    .post {
        width: 705px;
        background:#999;
        float:left;
    }

    #comments, #respond {
        background:#999;
    }

    #sidebar {
        background:#777;
    }

    #footer {
        clear:both;
        background:gray;
    }

    </style>
</head>
<body>

    <div id="main">

        <div class="inner">

            <div id="post" class="post">

                <h2>Lorem Ipsum Test Page</h2>

                <div class="entry">

                    <p>Lorem ipsum sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                </div> <!-- entry -->

            </div> <!-- post -->

            <div id="sidebar">

                <h2>Meta</h2>
                    <ul>
                        <li>Login</li>
                        <li>Anything</li>
                    </ul>

                <h2>Subscribe</h2>
                    <ul>
                        <li>Entries (RSS)</li>
                        <li>Comments (RSS)</li>
                    </ul>

            </div> <!-- sidebar -->

        </div> <!-- inner -->

    </div> <!-- main -->

    <div id="footer">
        <div class="inner">

        Something

        </div> <!-- inner -->
    </div> <!-- footer -->

</body>
</html>

Ответы [ 5 ]

6 голосов
/ 12 января 2011

Для свойства overflow, содержащего элементы, можно установить значение, отличное от visible.

3 голосов
/ 12 января 2011

Если честно, я бы не стал пытаться обойти это. Вы могли бы поместить ясность в нижний колонтитул, как предложили другие люди; но вы не гарантированы, что другие части вашего HTML не будут неправильно перемещены или заблокированы. Если вы применяете политику очистки только элементов, когда они портятся из-за плавающих элементов в произвольной части HTML; Вы могли бы сделать привычку всегда делать это. Вместо этого ниже приведен пример стиля, который обычно гарантирует, что другие элементы не будут неправильно перемещены: 

<div>
  <div style="float:right;"></div>
  <div style="float:right;"></div>
  <!--Add a clear div as last sibling of any floated elements-->
  <div style="clear:both;"></div>
</div>

Кроме того, я бы использовал пустой div вместо br. Это только я, хотя.

Итак, рисунок из вашего примера: 

        </div> <!-- post -->

        <!-- insert empty clear div hear -->
        <div style="clear:both;"></div>

        <div id="sidebar">
1 голос
/ 12 января 2011

Правильный способ - очистить левый и правый для следующего элемента.

Таким образом, в нижний колонтитул можно добавить: 

#footer {
    clear: both;
}

Это заставит нижний колонтитул опуститься доследующая строка, и это «правильный» путь.Позже вам будет легче изменить дизайн, потому что вам не придется менять разметку, только CSS.

1 голос
/ 12 января 2011

Вы можете просто сделать нижний колонтитул, чтобы он имел стиль с clear: both.

0 голосов
/ 12 января 2011

display: inline-block; действительно приятно.Жаль, что IE на самом деле не поддерживает это.

...