html - 如何实现此页脚

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

根据您的图像完成，这是一个小提琴

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