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

上記のように..メインコンテンツのdivがヘッダーに重なっています>.<メインコンテンツを取得するための適切なCSSを提案してください.ヘッダーの下から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;
}

CSSclear: 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 に答える