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应用于您先前为{{1} }，即：

.footer-copyright

（{.wrapper_inside_footer { display: flex; align-items: center; justify-content: space-between; height: 100% }是要使其扩展到页脚的整个高度以使垂直居中正确）

Answer 2

我要说的是我确实做了我所做的事情？

  body {
    margin: 0;
    padding: 0;
  }
  .footer {
    background: #f4f4f4;
    height: 100px;
    padding:0 15px;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.3);
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .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 class="footer">
  <div class="footer-links">
    <a href="#"><i class="fab fa-instagram"></i> I</a>
    <a href="#"><i class="fab fa-facebook"></i> F</a>
    <a href="#"><i class="fab fa-twitter"></i> T</a>
    <a href="#"><i class="fab fa-linkedin"></i> L</a>
  </div>
  <div class="footer-copyright">
     <%= link_to "Creato da: F & F", poetries_path =%>

  </div>
</div>

使用以下位置在底部的页脚：固定但在两者之间保持空间

2 个答案: