Question

抱歉我的英语不是很好。

要了解我的问题，请查看this fiddle和this fiddle。

查看<nav></nav>部分。如果菜单中的元素不多，则下一个块<section></section>将在菜单后面。如果菜单中有很多元素都可以，因为nav已经有了宽度。

如何制作下一个：

site

导航必须是100％宽度，而不是取决于元素的数量。

html <body>代码：

<body>
    <div class="wrapper">
        <header>
            <center>
                <!-- logo and headers here -->
            </center>
        </header>
        <nav>
            <!-- menu here -->
        </nav>
        <section>
            <header><h1>Lorem ipsum</h1></header>
             <!-- main content here -->
        </section>
        <aside>
            <section>
                <header>
                    <h1>Lorem ipsum</h1>
                    <!-- block content here -->
                </header>
            </section>
        </aside>

        <footer>
        </footer>
    </div>
</body>

css代码：

body {
    color: #8f8f8f;
    background-color: #f8f8f8; 
    background: url(../images/background.jpg) 50% 50% no-repeat #f8f8f8;
    /* border: 5px solid #7e7e7e;*/
    margin: 0;
}

.wrapper {
    max-width: 960px;
    margin: auto;
    border: 1px solid #7e7e7e;
}

header {
    padding: 20px 0;
    margin: auto;
}

aside, section {
    margin-top: 10px;
}

section {
    float: left;
    width: 700px;
    padding-bottom: 50px;
    border: 5px solid #ccc;
}

aside {
    float: right;
    width: 240px;
    border: 1px solid #ccc;
}

aside section
{
    width: 230px;
    margin-top: 0px;
}

footer {
    clear: both;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0px;
    padding: 0px;
}

section header {
    background-color: #CCCCCC;
    padding: 5px 0;
    margin: 0px;
}

section header h1 {
    padding-left: 20px;
}

section p {
    padding: 10px 20px;
    margin: 0px;
}

/* css for nav */

Answer 1

导航器出现在左侧，因为您尚未清除浮动的lis。如果添加以下样式，则它应该起作用：

nav:after {clear:both; display:block; content:'';}

Example

Answer 2

我总是在我的重置样式表中添加.clearfix css类，因为您很可能需要在站点中多次清除浮动区域。它有助于使只有漂浮物的容器回到它们的高度。

将其添加到样式表

CSS

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix{
    *zoom:1;
}

然后将class="clearfix"添加到您的<nav>元素（甚至是<ul class="nav">）

这是一个JSfiddle：http://jsfiddle.net/Uuyp8/8/

这个clearfix解决方案是基于（着名的？）micro clearfix hack在此处详细解释的：http://nicolasgallagher.com/micro-clearfix-hack/

Answer 3

制作nav float:left和粉红色部分clear:left（或导航clear:right，效果相同）。

如何使nav元素100％宽度（所以其他元素将在它之下，而不是在它之后）

3 个答案: