Question

我有一个html结构如下，

<div id="page-wrap">
    <header>
        <div id="logo">
        </div>
        <nav>
            <ul>
                <li><a href="">text 1</a><li>
                <li><a href="">text 2</a></li>
                <li><a href="">text 3</a></li>
            </ul>
        </nav>
    </heder>

    <div id="main-content">
        <h1>Some Heading</h1>
        <p>Some Text</p>
        <div>A div</div>
    </div> <!-- end of main-content -->
</div> <!-- end of page-wrap -->

用css

#page-wrap {
max-width:850px;
top:0;
bottom:0;
height:100%;
margin: 0 auto;
} 

header {
padding: 80px 0px 0px 0px ;
position: relative;
}

#logo {
position: absolute;
left:0;
width:123px;
height:122px;
background:transparent url(../images/logo.png) no-repeat;
}

header nav {
position: absolute;
right:0;
}

header nav ul {

}

header nav ul li {
display:inline;
list-style: none;
}

如上所述..主内容div与标题＆gt;重叠。＆lt;请建议使用propper css获取main-content与标题底部之间的距离为80px ..（标题上有一个122px高度的徽标）

Answer 1

HTML

<div id="page-wrap">
    <header>
        <div id="logo"> </div>

        <nav>
            <ul>
                <li><a href="">text 1</a><li>
                <li><a href="">text 2</a></li>
                <li><a href="">text 3</a></li>
            </ul>
            <div class="clear"> </div>
        </nav>
        <div class="clear"> </div>
    </header>

    <div class="clear"> </div>

    <div id="main-content">
        <h1>Some Heading</h1>
        <p>Some Text</p>
        <div>A div</div>
    </div> <!-- end of main-content -->
</div> <!-- end of page-wrap -->

CSS：

html, body {
    height: 100%;
}

#page-wrap {
    max-width:850px;
    height:100%;
    margin: 0 auto;
} 

header {
    margin: 80px 0 0 0;
}

#logo {
    width:123px;
    height:122px;
    background: url("../images/logo.png") no-repeat;
    float: left;
}

header nav {
    float: right;
}

header nav ul {

}

header nav ul li {
    display:inline;
    list-style: none;
}
#main-content {
 margin: 80px 0 0 0;
}

.clear {
    clear: both;
}

查找CSS clear: both，您就会明白我使用clear的原因了。

Answer 2

尝试为主要内容提供一些上边距...

CODE：

<div id="main-content">
//somecode
<div>

CSS：

# main-content
{
margin-top:somepixel;
}

如何使内容div不重叠标题？

2 个答案: