html - 底部的页脚使用位置 :fixed but maintaining space-between

Question

我试图将页脚设置在页面底部，并且我设法使用 CSS 属性“position:fixed”和“bottom:0”做到了这一点。但是，通过这样做，我的两个页脚 DIV 之间不再有空格。我一直在解决这个问题。

我的 html:

<div class="footer">
  <div class="footer-links">
    <a href="#"><i class="fab fa-instagram"></i></a>
    <a href="#"><i class="fab fa-facebook"></i></a>
    <a href="#"><i class="fab fa-twitter"></i></a>
    <a href="#"><i class="fab fa-linkedin"></i></a>
  </div>
  <div class="footer-copyright">
     <%= link_to "Creato da: F & F", poetries_path =%>

  </div>
</div>

我的CSS:

.footer {
  background: #F4F4F4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  padding: 0px 50px;
  color: rgba(0,0,0,0.3);
  position:fixed;
  bottom:0;
}
.footer-links {
  display: flex;
  align-items: center;
}
.footer-links a {
  color: black;
  opacity: 0.15;
  text-decoration: none;
  font-size: 24px;
  padding: 0px 10px;
}
.footer-links a:hover {
  opacity: 1;
}
.footer .fa-heart {
  color: #D23333;
}

基本上我想要页面左下角的 DIV footer-links 和右下角的 DIV footer-copyright。但是，现在即使我使用 space-between

它们都位于左下角

Answer 1

将包装元素(即 DIV)放入您的 .footer-copyright DIV 中，包含/包装页脚应包含的两个元素，并将 CSS 应用于它您之前拥有的 .footer-copyright，即:

.wrapper_inside_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%
}

(height: 100% 是为了让它展开到footer的全高以获得垂直居中的权利)