css - 为网站创建一个简单的标题 - 为什么我不能让 img 一直 float ？

Question

我正在为我的 PHP 元素创建一个非常简单的博客，但遇到了一个简单的问题。我无法让我的页眉图像一直 float 。我有一个横幅，左边有一些文字，我有一个 1px 的切片，在可以选择的任何分辨率的宽度上重复(确保横幅填满任何屏幕)。我希望图像始终呈现在屏幕的右边缘，同样，与屏幕分辨率无关。但它是在一个固定的位置进来的。这是我写的:

HTML:

<div id="header">
    <img src="images/banner.jpg" alt="banner" title="Prairie"/>
    <img class="right_image" src="images/banner_right_image.jpg" alt="elavator" title="prairie elevator"/>
</div>

CSS:

#header {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 120px;
    background: url(images/banner_right.jpg) repeat-x;
    z-index: 1;
}
#header.right_image {
    float: right;
    position: fixed;
    top: 0px;
    z-index: 1;
}

这里有什么问题？

感谢任何输入。

Answer 1

你应该把 #header.right_image 分开，这样它就是 #header .right_image

同时从 #header.right_image 中删除 position: fixed

这个有效:

#header .right_image {
    float: right;
}

示例:http://jsfiddle.net/FTBWU/