html - 将标题图像移动到右侧

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;
}