Question

我有以下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;
}

Answer 1

绝对放置接触盒。

对于它的价值，上面的CSS都不会起作用，因为你使用一个点来表示div的类，而不是一个#pound符号来表示div的ID（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;
}

CSS：将一个框放在主div上方的顶部

1 个答案: