很抱歉这个真正的菜鸟问题,但是由于某种原因,我无法弄清楚为什么它不起作用。基本上,我试图将徽标移到标题菜单旁边。即使浏览器调整了大小,徽标也将保留在标题菜单旁边。

码:

HTML

<div class="header">
    <div class="logo">
    <div class="logo-name">
        <a href="/"><img src ="/images/logo.png" alt="Company Logo" /></a>
    </div>
    </div>
    <div class="bar nav">
    <div class="nav-outer">
    <div class="nav-wrapper">
    <div class="nav-inner">
    Home, Products... </div></div>etc...


的CSS

.header:after {
    background-color: #1D2124;
    background-position: center center;
    background-repeat: no-repeat;
    content: " ";
    display: block;
    height: 92px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
div.logo {
    display: block;
    left: 0;
    margin-left: 110px;
    position: absolute;
    top: 5px;
}
.bar:before, .bar:after {
    background-repeat: repeat;
    bottom: 0;
    content: " ";
    position: absolute;
    top: 0;
    z-index: -1;
}
.bar:before, .bar:after {
    background-repeat: repeat;
    bottom: 0;
    content: " ";
    position: absolute;
    top: 0;
    z-index: -1;
}
.nav {
    min-height: 33px;
    top: 53px;
    width: auto;
    z-index: 100;
}
.nav-wrapper {
    left: 65px;
    margin: 0 auto;
    position: relative;
    width: 890px;
}


图片:http://imageshack.us/f/40/c4dr.png/

感谢您的所有帮助。

最佳答案

您是否正在寻找类似的东西?

的HTML

<div class="main">
    <div class="nav">
        <div class="sub logo"></div>
        <div class="sub">link</div>
        <div class="sub">link</div>
        <div class="sub">link</div>

    </div>
</div>


的CSS

.sub{
    width:auto;
    height:20px;
    background:green;
    float:left;
    min-width:40px;
}
.logo{
    background:blue;
}
.main{
    background:red;
    height:40px;
}


jsfiddle

关于html - 在浏览器调整大小时移动图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17637231/

10-13 01:55
查看更多