1

次の HTML がdiv.logo中央に配置されています。

contactDetails左または右に別のボックスを配置し、中央の画像を保持できるようにする最も簡単なクロス ブラウザー ソリューションは何でしょうか?

HTML:

<div id="page-wrap">
    <header>
        <div id="logo">
                <img src="_assets/images/logo.png" width="500" height="518"/>
                <h3>New Website Soon</h3>
        </div><!--END logo-->
        <div id="contactDetails">
            <p>Content</p>
        </div>
    </header>
</div><!--END page-wrap-->

CSS:

*{
    padding: 0;
    margin: 0;
}
body{
    background:url('../images/background.png') repeat;
    margin: 0 auto;
}
div.page-wrap,header,div.logo,h1{
    font-family: arial;
    text-align: center;
    margin:0;
}
div.page-wrap,header,div.logo,img{
    border-radius: 5px;
}
div.contactDetails{
    float: left;
    margin: 0;
}
4

1 に答える 1

3

コンタクトボックスは絶対に配置してください。

価値があるのは、divのIDを表す#ポンド記号ではなく、ドットを使用してdivのクラスを表すため、上記のCSSはどれも機能しません(div.logo対応する<div class="logo">、にdiv#logo対応する<div id="logo">)

#page-wrap {
/* parents of absolutely positioned elements must have a position */
position: relative;
}

#contactDetails {
position: absolute;
top: 0;
right: 0; 
/* you could use 'left: 0;' instead, to move to the left edge */
width: 300px;
}
于 2012-10-02T01:03:14.763 に答える