3

ロゴとタイトルのdivの配置に問題があります。ロゴは正常に機能しますが、タイトルdivが正確に希望する場所に配置されません。その位置は、ヘッダーコンテンツdivではなくロゴに関連するようになります。

前もって感謝します

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style>
    *
    {
        margin:0px;
        padding:0px;
    }

    #header_wrap
    {
        float: left;
        width: 100%;
        height: 150px;
        background: #dddddd;
    }

    #header_content
    {
        width: 850px;
        height: 150px;
        margin: 0 auto 0;
        background: #cccccc;
    }

    #logo
    {
        width: 50px;
        height: 50px;
        background: #ffffff;
        position: relative;
        left: 10px;
        top: 50px;
    }

    #title
    {
        width: 100px;
        height: 50px;
        background: #ffffff;
        position: relative;
        left: 100px;
        top: 10px;
    }
    </style>
</head>

<body>

    <div id="header_wrap">
        <div id="header_content">
            <div id="logo">LOGO</div>
            <div id="title">TITLE</div>
        </div>
    </div>

</body>
</html>
4

2 に答える 2

1

position:relative;元の位置に対して要素の位置を変更します。

relative

ボックスの位置は、通常フローに従って計算されます (これを通常フローの位置と呼びます)。次に、ボックスは通常の位置に対してオフセットされます。

position:absolute位置がそうでない次の親に関して要素の位置を変更するために使用したいstatic：

#logo, #title{
    position: absolute;
}

#header_content{
    position: relative;
}

これにより、コンテンツ フローの要素が削除されるため、高さを適用する必要がある場合があることに注意してください#header_content。

以下も参照してください。

于 2013-01-10T09:20:03.450 に答える
0

あなたが望むものを正確に説明してください。私はそれが役立つと思います：

#header_content {
  width: 850px;
  height: 150px;
  margin: 0 auto 0;
  background: #CCC;
  position: relative;
}

#logo {
  width: 50px;
  height: 50px;
  background: white;
  float: left;
  margin-right: 50px;
  border: 1px solid #123456;
}

#title {
  width: 100px;
  height: 50px;
  background: white;
  float: left;
  border: 1px solid #098756;
}
于 2013-01-10T09:48:49.913 に答える