0

私はグリッド 960 を使用していて、clearfix を機能させることができませんがclear:both、要素に使用すると、目的の効果を得ることができます。(通常) 信頼性が高いため、clearfix を使用することをお勧めします。

以下のコードでは、ヘッダー セクションに左のロゴ領域と右のバナー領域があり、その下にナビゲーション バーがあります。

このナビゲーション バーは、私が苦労している要素です。要素に追加style="clear:both;"すると、正常に動作します。navただし、ヘッダー要素で clearfix を使用すると機能しません。

動かないページはこちら（clearfix使用）

これが機能するページです（clear：bothを使用）

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Home Page</title>
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/960_12_col.css" rel="stylesheet" type="text/css" />
    <link href="css/site.css" rel="stylesheet" type="text/css" />



</head>
<body>
<div id="container" class="container_12 ">


    <header class="clearfix grid_12">
        <div id="logoarea" class="grid_6 alpha">
            <div id="title">
                <h1>iContinuity Directory Services</h1>
            </div>
            <div id="logindisplay">
                    [ <a href="/Account/LogOn">Log On</a> ]
                    [ <a href="/Account/Register">Register</a> ]

            </div>
        </div><!-- end logoarea -->

        <div id="headerbanner" class="grid_6 omega">
            <p>this is the header banner area</p>
        </div>

        <nav class="">

            <ul id="menu">
                <li><a href="/">Home</a></li>
                <li><a href="/Home/About">About</a></li>
            </ul>

            <form action="/Search/Search" class="navsearch" method="get">
                <input class="textbox" id="search" name="search" type="text" value="" />
                <input type="submit" value="Search" />
            </form>  
        </nav>

    </header>


    <section id="main" class="grid_8 ">

        <h2>Welcome to iContinuity Services</h2>
        <p>

        </p>

    </section>



    <aside id="sidebar" class="grid_4">
        ontrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a lin
    </aside>


    <footer class="grid_12">
        <p>this is the footer area</p>
    </footer>

</div> <!-- end 960 grid container -->

</body>
</html>

明らかに明らかな悪いことをしていないことを願っていますが、それを見ることはできません。

4

1 に答える 1

0

clearfix クラスを含む NAV 要素の直前に空の DIV を配置すると、それが機能するはずです。

于 2012-07-10T13:54:38.123 に答える