0

これを修正するために多くのことを試しました。マージンを使用しないと、親 div 内にネストされた div を取得できないようです。position:relative親とposition:absoluteネストされた通常の方法で取得しようとしています。それは機能していませんが、誰かが理由を知っていますか?

HTML

<div class="header">
    <div class="logo">
        <img src="/images/logo.png" width="96" height="82">
    </div> 
    <div id="nav">
        <a href="$HOME_PAGE_LINK$">Portfolio</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </div>
    <div id="headerPro">
    </div>
</div>

CSS

.header {
    position:relative;
    background-color: #2C2E31;
    border-bottom: #242426 2px solid;
    height: 182px;
}
.logo {
    text-align: center; 
    padding-top: 35px;
}
#nav {
    position:absolute;
    bottom: 0;
    width: 100%;
    text-align:center; 
    text-decoration:none; 
    font-size:20px;
    font-family:raleway-regular; 
}
#nav a {
    border-bottom:#FFFFFF 2px solid; 
    color:#FFFFFF;
    text-decoration:none; 
    margin-left: 8px; 
    margin-right:8px;
}
#headerPro {
    position:absolute;
    float:right;
    width:100px;
    height:100px;
    background-color:red;
}
4

3 に答える 3

1

あなたがそれをどのように見せたいのかを正確に伝えるのは難しいですが、多分私はあなたを正しいと思います:

ulベスト プラクティスであるナビゲーションに使用する HTML コードを修正しました。

<div class="header">
    <div class="logo">
        <img src="/images/logo.png" alt="logo"/>
    </div> 
    <ul id="nav">
        <li><a href="$HOME_PAGE_LINK$">Portfolio</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <div id="headerPro">
    </div>
</div>

これにより、css コードは次のようになります。

.logo > img {
    display: inline-block;
    width: 96px;
    height: 82px;
}

#nav {
    position:absolute;
    list-style-type: none;
    bottom: 0;
    width: 100%;
    text-align:center; 
    text-decoration:none; 
    font-size:20px;
    font-family:raleway-regular; 
}

#nav > li {
    display: inline;
}

#headerPro {
    position:absolute;
    top: 35px; /* assuming you want this to line up with the logo */
    right: 0;
    width:100px;
    height:100px;
    background-color:red;
}

ここにデモがあります。

于 2013-05-23T13:16:48.130 に答える
1

このフィドルを参照してください

例

float:left をロゴ css に追加する 2 つの変更を行いました。

.logo {
   float:left;
}

ヘッダー pro css から position:absolute を削除しました

ロゴ div のために、div がヘッダー ブロックの外側に流れています。そのフロートを左にすると (私がフィドルで行ったように)、赤い Div が上に移動します。

#HeaderPro div が必要な場所を正確に説明していただけると助かります。

于 2013-05-23T13:13:50.230 に答える
0

どうやら、ブラウザは div#headerPro を前の（兄弟）divのすぐ下に配置します。親 div の一部にする場合は、top:2% を追加して、赤い div を黒い div の右上隅に配置します。

#headerPro {
 position:absolute;
 float:right;
 width:100px;
 height:100px;
 background-color:red;
 top: 1%;
}
于 2013-05-23T13:20:33.717 に答える