将标题图像移动到右侧

Question

好的伙计们，我在这里使用的是HTML和CSS，我试图将我的标题放在我的标题中，但是当我浮动时：正确; 蓝色背景不会停留。 任何想法我可能做错了什么？

HTML

<header id="header">
<img id="logo" src="images/logo.png" alt="logo.png" title="Mystery"/>
</header>

CSS

#header {
background-color: #9CF; }
#logo {
float:right;} 

Answer 1

尝试

#header { text-align: right}

从img中删除浮动。

或者，您可以轻松地向标题添加高度以解决浮动问题：

#header {background-color: #9CF; height: 100px} /* example height */
#logo {float:right;} 

演示：http://jsfiddle.net/lucuma/y2pX6/1/

Answer 2

您可以将overflow:hidden置于#header或执行clearfix hack。

Nicholas Gallagher的微观修正：

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
cf {
    *zoom: 1;
}

Answer 3

只需添加：

#logo {
    float:right;
    /*This is important as inline elements like img are inmune to float*/
    display: block;
} 

如果这会对您的布局造成任何问题，您也可以尝试：

#header {
    background-color: #9CF;
    /*Part of a classic layout hack*/
    overflow:hidden;
}