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

和

这是一切都开始遍布的地方：

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

有什么想法吗？请

Answer 1

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

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

分解为：

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

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

Answer 2

在标题元素上设置宽度。它默认为width: auto;，它跨越了浏览器窗口的100％。因此，当您重新调整窗口宽度的大小时，标题元素的大小也会移动内容。

更新1

您正在使用边距从浏览器窗口的左侧放置徽标280px，因此当您调整窗口宽度时，您的徽标也会移动 - 徽标正在“推送”。你想要做的是将所有东西都包装在容器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/

调整Windows大小时，徽标会移动到整个地方

2 个答案: