如何实现这个页脚

Question

我绝对是空白的，我正试图在左侧显示一个带有文本的页脚，并且右边的图像是一个高大的垃圾。

请参阅图片，您将看到文字和正方形，以显示图片的放置位置：

非常感谢你的帮助人员

Answer 1

您可以将两个元素绝对放置在相对定位的容器中，如此...根据需要调整高度和尺寸。

HTML：

<div id="footer">
    <span>Text here</span>
    <img src="file" alt="" width="" height="" />
</div>

CSS：

#footer {
    position: relative;
    height: 200px;
}

#footer span {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

#footer img {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

Answer 2

根据您的图片完成，这是Fiddle

<footer>
  <span>YOUR AMBITION REALISED</span>
  <img src="/" alt="Image"/>
</footer>


footer {
  background: #722F8E;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
}
span {
  display: block;
  float: left;
  margin: 140px 0 0 70px;
  font-family: Tahoma;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 1px;
  color: #fff;
}
img {
  background: #fff;
  float: right;
  width: 100px;
  height: 160px;
  margin: 0 80px 0 0;
  border: 3px solid #111;
}