Question

我创建的网站的页脚有一个小问题。因此，共有2个部分： -在顶部：.footer-sections和3 div -在底部：.footer-bottom仅包含p image here

我发现了问题所在，但我不知道如何解决：.footer-sections的第一个孩子比较密集，占用了超过1/3的空间（我猜是这样）。

.footer {
  text-align: center;
  background-color: #333;
  color: #fff;
  padding: 50px;
  bottom: 0;
  width: 100%;
}

.footer .footer-sections {
  display: flex;
  justify-content: space-between;
}

.footer .footer-sections div {
  padding: 2rem 0rem;
  top: 0;
}

.footer .footer-sections p {
  font-size: 14px;
}

.footer .footer-bottom {
  text-align: center;
}

.footer .footer-bottom p {
  font-size: 14px;
}

.footer ul {
  list-style: none;
}

.footer ul li {
  font-size: 14px;
  color: #fff;
}

<div class="footer">
  <div class="footer-sections">
    <div class="adress-footer">
      <h4>Contact</h4>
      <p>102, Pyidaungsu Yeithka Road, Yangon, Myanmar</p>
      <p>+33 6 24 15 14 02</p>
      <p>contact@hrasia.com</p>

    </div>
    <div class="menu-footer">
      <h4>Operating Hours</h4>
      <p>Monday - Friday : 8 a.m - 5 p.m</p>
      <p>Saturday : 9 a.m - 1 p.m</p>
      <p>Sunday : closed</p>
    </div>
    <div>
      <h4>Blog</h4>
      <p>Read our latest posts</p>
      <p>How to write a resume ?</p>
      <p>The interview process</p>
    </div>

  </div>
  <div class="footer-bottom">
    <p>&copy; hrasia.com | Designed by Lorem</p>
  </div>

</div>

Answer 1

您可以使用flex轻松修复该问题；只需添加

.footer .footer-sections div{
    // Thanks to  Rickard Elimää
    max-width: calc(100% / 3)
}

这可以解决您的问题。

您也可以在此处进行检查：https://codepen.io/bhanusinghR/pen/bGbqdbm?editors=1100

Answer 2

首先，由于您有填充，因此flex需要了解div的宽度（不包括填充），因此您需要添加box-sizing: border-box来考虑这一点。

您还需要告诉页脚部分，它们应该占用相等的空间。您可以通过向其添加flex: 1来实现。

我还添加了border: 1px solid #fff，以使其更容易看到结果。尝试从box-sizing: border-box中删除.footer，以查看区别。

.footer {
  text-align: center;
  background-color: #333;
  color: #fff;
  padding: 50px;
  bottom: 0;
  width: 100%;
  box-sizing: border-box; /* ADDED */
}

.footer .footer-sections {
  display: flex;
  justify-content: space-between;
}

.footer .footer-sections div {
  padding: 2rem 0rem;
  top: 0;
  border: 1px solid #fff;
  flex: 1; /* ADDED */
}

.footer .footer-sections p {
  font-size: 14px;
}

.footer .footer-bottom {
  text-align: center;
}

.footer .footer-bottom p {
  font-size: 14px;
}

.footer ul {
  list-style: none;
}

.footer ul li {
  font-size: 14px;
  color: #fff;
}

<div class="footer">
  <div class="footer-sections">
    <div class="adress-footer">
      <h4>Contact</h4>
      <p>102, Pyidaungsu Yeithka Road, Yangon, Myanmar</p>
      <p>+33 6 24 15 14 02</p>
      <p>contact@hrasia.com</p>

    </div>
    <div class="menu-footer">
      <h4>Operating Hours</h4>
      <p>Monday - Friday : 8 a.m - 5 p.m</p>
      <p>Saturday : 9 a.m - 1 p.m</p>
      <p>Sunday : closed</p>
    </div>
    <div>
      <h4>Blog</h4>
      <p>Read our latest posts</p>
      <p>How to write a resume ?</p>
      <p>The interview process</p>
    </div>

  </div>
  <div class="footer-bottom">
    <p>&copy; hrasia.com | Designed by Lorem</p>
  </div>

</div>

水平对齐页脚

2 个答案: