调整 Windows 大小时徽标会到处移动

Question

好吧，我正在开发的网站有问题。事实上，我经常遇到这个问题，但从未寻求帮助，我想现在是时候了。这是我的CSS：

    header {
    background: #EEEEEE;
    height: 50px;
    }
    .logo {
    background: url(logo.png);
    width: 200px;
    height: 40px;
    margin: 0 280px;
    }

当我调整窗口大小时，标题中的徽标将在调整窗口大小时进入右侧。我尝试过绝对位置、相对位置等，但效果相同。请问大家有什么想法吗？

这是我的 HTML：

<header>

<div class="logo"></div>

</header>

这里是代表问题的图片的链接：

这是一切都完美运行的地方，一切都对齐了：

FullSizedWindow http://dl.dropbox.com/u/6212750/Full%20Sized%20Window.png

和

这个一切都开始变得混乱起来：

WhenWindowIsRished http: //dl.dropbox.com/u/6212750/When%20window%20is%20resized.png

有什么想法吗？请

Answer 1

设置标题元素的宽度。默认为 width: auto; ，它覆盖 100% 的浏览器窗口。因此，当您重新调整窗口的宽度时，标题元素的大小也会随着内容的移动而调整。

更新 1

您使用边距将徽标放置在距浏览器窗口左侧 280 像素的位置，因此当您调整窗口宽度时，您的徽标也会移动 - 徽标被“推动” 。您想要做的是将所有内容包装在容器 div 中，并设置相对于该容器的边距间距，而不是相对于浏览器窗口。

HTML

<div id="container">
    <header>

    <div class="logo"></div>

    </header>
</div>

CSS

#container {
    width: 400px;
    margin: 0 auto;
}
header {     
    background: #EEEEEE;    
} 
.logo {     
    background: url(http://i.imgur.com/4hs7p.png) no-repeat top left;    
    width: 200px;     
    height: 198px;     
    margin: 0;    
}

小提琴：http://jsfiddle.net/alpacalips/ybe9d/2 /

Answer 2

我唯一能想到的就是完全设置背景属性。

background: url(logo.png) 0 0 no-repeat;

细分为：

background: url [left,right,px,%] [top,bottom,px,%] [repeat];

你能发布一个 JSFiddle 以便我可以看到它发生吗？