Question

我很难在我的标题中放置包含联系信息的div。我一直在读这个问题几个小时＆amp;尚未找到解决方案。我正在尝试将我的联系信息堆叠在我的布局的右上角。

-

我想要实现的目标的图像：

http://i45.tinypic.com/2zrgu8o.jpg

我的代码目前正在制作的图片：

http://i48.tinypic.com/mbhlcz.jpg

-

我的HTML：

<html>
    <head>

  <link rel="stylesheet" href="/css/header.css" />

    </head>

<meta http-equiv="Content-Type" content="text/html; charset=big5" /></head>

<body style="margin:0; padding:0;">

<div id="logo">
<img src="/images/logo-top.png">
</div>

<div class="contact">
Email: sadlkj@yahoo.com | Phone: 1 (732) 235-7239
</div>



<div id="header-bg"> 
</div>


</body>
</html>

我的CSS：

#logo {
    postion: fixed;
    width: 300px;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto; 
    margin-right: auto;
    z-index: 1;

} 

#header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;       
    background-image: url("/images/header-bg.png");
    background-repeat: repeat-x;
    z-index: -1;


}

.contact {
    float:right;
    margin-left:10px;
    margin-bottom:10px;}
}

非常感谢您的帮助。

Answer 1

我建议使用<span>代替div，或使用<div style="display: inline;">

Answer 2

你已经没事了，你的班级定义中只有一个拼写错误。您必须说0px而不是0才能进行定位

top:0px;
left:0px;

在这里......看看：http://jsfiddle.net/t5LZL/2/

Answer 3

问题可以通过将contact div放在HTML中的logo div之前解决。

float只浮动到右边或左边，而不是向上。 contact div位于logo div的底部，因此会在该级别上浮动。通过将它放在logo之前，它会在logo推下它之前浮动。

Answer 4

使用此html结构并更改您的CSS

<div id="header-bg"> 
<div class='center_wrap'> 
 <div id="logo">
 <img src="/images/logo-top.png">
 </div>

 <div class="contact">
 Email: sadlkj@yahoo.com | Phone: 1 (732) 235-7239
 </div>
</div>
</div>

不能再多运气了

堆叠Div在其他标头元素顶部

4 个答案: