我认为向右移动会将元素推到最右侧,但事实并非如此。这是我的HTML:
<footer>
<p class="float-left">©<%: DateTime.Now.Year %></p>
<img class="breathingRoom" src="Images/axXAndSpaceLogo.jpg" alt="Across Time and Space logo" width="128" height="80" />
<a class="breathingRoom" href="http://www.awardwinnersonly.com/humans.txt" target="_blank">
<img src="Images/humanstxt-isolated-orange.gif" alt="Humans dot text logo" width="105" height="46" /></a>
<img class="float-right" src="Images/Logo-BannerSmall_1_.gif" />
</footer>
...这里是相关的CSS:
.float-left {
float: left;
}
.float-right {
float: right;
}
.breathingRoom {
margin-left: 4px;
margin-top: 4px;
}
...但是最终的图像与人类.txt图像对接,而不是拥抱屏幕的东侧。我需要做些什么才能正确地肘击它?
html5 css footer
答案 0 :(得分:1)
footer {
position: relative;
}
.float-right {
position: absolute;
right: 0; /* no float necessary */
}
由于你没有说明其余元素的任何条件,你实际上不需要将它们向左浮动,除非你想要图像和文本内联。
答案 1 :(得分:1)
我用你的代码做了一个简短的例子:
右图是右边的。
那有什么不对?
我认为这是一个doctype问题,如果你没有doctype,浏览器就不能很好地理解'footer'标记了。在html的第一行添加Doctype定义:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
或者您可以添加css:
footer{
display:block;
width:100%;
}