如何让这个页脚在我的页面上与左右元素正确对齐？

Question

我的页面底部有这个页脚

在此处输入图片说明

这是CSS：

.footer {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 10;
    top: 625px;
    overflow: hidden;
}

.images {
}

所以我希望该文本块仅存在于页面的左侧，然后一行图像仅存在于右侧。 什么是最干净的方法来做到这一点？ 我是否需要引导网格才能使其正常工作？ 我试过只做一个边距左移，但由于某种原因，它向图像底部添加了填充，因此它增加了页面的高度。

Answer 1

为页脚文本和页脚图像创建一个包含 2 个子 div 的父 div，然后使用 flexbox 进行对齐和间距。

Answer 2

如果我正确理解您的问题 - 您可以尝试将与某些图像对应的文本放在单个divs ，例如，如果您想放置“嗨！” 用某人挥手的图像，试试这个：

<div>
   <h1>Hi There!</h1>
   <img src="wavingHand.jpeg">
</div>

然后对每一对重复此操作，并添加以下样式：

h1 {
  display: inline;
}

img {
  display: inline;
}

您甚至可以添加一些floats或position: relative如果这不是您想要的确切效果

Answer 3

你可以使用这样的东西：

.image {
float: right;
position: relative;
margin: 10px 15px 15px 10px;
 }

.text {
   float: left;
 }

Answer 4

<div class="footer">
  <div class="footer-text">Footer Text</div>
  <img src="image.png"> 
</div>

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

由于页脚元素只有 2 个子元素 - 文本和图像，您可以使用 justify-content: space-between 来均匀分布两者之间的空间，从而将它们放置在左右两端。