如何将图像移动到页脚的右侧？答案

【问题标题】：How can I move an image to the right side of the footer?如何将图像移动到页脚的右侧？
【发布时间】：2013-11-05 07:00:27
【问题描述】：

我认为向右浮动会将元素推到最右侧，但事实并非如此。这是我的 HTML：

<footer>
    <p class="float-left">&copy;<%: 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;
}

...但最终图像与human.txt 图像对接，而不是紧贴屏幕的东侧。我需要做些什么才能将它推向正确的舞台？

html5 css 页脚

【问题讨论】：

标签： css html webforms css-float footer

【解决方案1】：

footer {
  position: relative;
}
.float-right {
  position: absolute;
  right: 0;  /* no float necessary */
}

由于您没有为其余元素说明任何条件，因此您实际上不需要将它们向左浮动，除非您希望图像和文本内联。

【讨论】：

【解决方案2】：

我用你的代码做了一个简短的示例：

JSFiddle sample

右图在右边。

那怎么了？

我认为这是一个 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%;
}

【讨论】：