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>
        </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;
}

如上.. main-content div与标题重叠>.<请建议propper css来获取main-content与标题底部的距离为80px ..（标题上有一个高度为122px的徽标）

4

2 回答 2

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.

于 2013-02-07T07:49:13.060 回答
-2

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

代码：

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

CSS：

# main-content
{
margin-top:somepixel;
}
于 2013-02-07T07:56:34.610 回答