html - 将绝对 div 放置在相对 div 旁边

Question

我正在尝试将绝对对象放在相对对象旁边。初始对象导致相关的 div 换行到下一行。

除了 Logo 强制标题移动到新的“行”之外，一切正常。如果我将 #logo div 更改为 position:absolute 我可以解决定位问题，但随后我的 Logo 悬停将停止运行。

编辑:这是一个现场演示:http://vaer.ca/warm-forest-8234/

这是我的 HTML:

<div id="container">

        <a href="index.html" id="logo"></a>

        <div id="header">

            <h2><a href="index.html">Collectif</a></h2>

        </div>  

        <div id="nav">
            <ul>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Work</a></li>
            </ul>
        </div>

这是我的 CSS:

#container {
    width: 980px;
    margin: 0 auto;
    position: relative;
    }

#header {
    height: 75px;
    text-align: right;
    position: relative;
    }

#header h2 {
    font-size: 2.5em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-top: 15px;
    }

#header a {
    text-decoration: none;
    color: #000000;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    }

#header a:hover {
    color: #7acfdd;
    }

#logo {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-left: 10px;
    background: url('../img/logo.png') no-repeat;
    width: 60px;
    height: 60px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    }

#logo:hover {
    position: relative;
    background: url('../img/logo-hover.png') no-repeat;
}

Answer 1

你设置了你#logo链接到 display:block强制 <a>元素占据整个空间。使用开发人员工具查看它。您可以执行以下操作来解决所有问题，并使其更具语义。

#logo{
display:inline-block;
}
#header{
display:inline-block;
float:right
}

这些更改将使您获得想要的结果。