3 位于左侧的列页脚 - html答案

【问题标题】：3 Column footer sitting on left hand side - html3 位于左侧的列页脚 - html
【发布时间】：2021-12-06 22:28:18
【问题描述】：

我正在尝试使用 3 列页脚，但我尝试的所有内容都位于左侧。下面最新的，左侧的列相互重叠。背景颜色和字体不起作用，并且在索引页面上，字体似乎因某种原因变粗。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

footer-container {
  background-color: #99cc99;
  font-family: "Open Sans";
  padding-bottom: 4rem;
}

footer {
  width: 80%;
  height: 40vh;
  background-color: #99cc99;
  color: white;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
}

footer-heading {
  display: flex;
  flex-direction: column;
  margin-right: 4rem;
}

footer-heading h2 {
  margin-bottom: 2rem;
}

footer-heading a {
  color: white;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

footer-heading a:hover {
  color: #336633;
  transition: 0.3s ease-out;
}

<div class="footer-container">

  <div class="footer">

    <div class="footer-heading footer-1">

      <h3>ADDRESS</h3>
      <p>1234 Sandy Beach Road, <br> Queenscliffe, New Zealand</p>

    </div>

    <div class="footer-heading footer-2">
      <h3>CONTACT</h3>
      <p>Sally Sharp <br> Tel: (00) 1234 1122</div>
  </div>

  <div class="footer-heading footer-3">
    <h3>QUICK LINKS</h3>

    <a href="About/About.html#Ammenities">Ammenities</a><br>
    <a href="About/About.html#Availability">Availability</a><br>
    <a href="About/About.html#Cancellation Policy">Cancellation Policy</a><br>
    <a href="About/About.html#Location">Location</a><br>
    <a href="About/About.html#What's nearby">What's nearby</a>

  </div>

</div>

</div>

【问题讨论】：

标签： html css footer

【解决方案1】：

您的 HTML 中 .footer-heading.footer-2 末尾有一个额外的 </div>。此外，CSS 选择器中类的语法是.className。您的所有针对类的 CSS 规则都没有在类名之前包含 . 字符。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.footer-container {
  background-color: #99cc99;
  font-family: "Open Sans";
  padding-bottom: 4rem;
}

.footer {
  width: 80%;
  height: 40vh;
  background-color: #99cc99;
  color: white;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
}

.footer-heading {
  display: flex;
  flex-direction: column;
  margin-right: 4rem;
}

.footer-heading h2 {
  margin-bottom: 2rem;
}

.footer-heading a {
  color: white;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

.footer-heading a:hover {
  color: #336633;
  transition: 0.3s ease-out;
}

<div class="footer-container">
  <div class="footer">
    <div class="footer-heading footer-1">
      <h3>ADDRESS</h3>
      <p>1234 Sandy Beach Road, <br> Queenscliffe, New Zealand</p>
    </div>

    <div class="footer-heading footer-2">
      <h3>CONTACT</h3>
      <p>Sally Sharp <br> Tel: (00) 1234 1122
    </div>

    <div class="footer-heading footer-3">
      <h3>QUICK LINKS</h3>

      <a href="About/About.html#Ammenities">Ammenities</a><br>
      <a href="About/About.html#Availability">Availability</a><br>
      <a href="About/About.html#Cancellation Policy">Cancellation Policy</a><br>
      <a href="About/About.html#Location">Location</a><br>
      <a href="About/About.html#What's nearby">What's nearby</a>
    </div>
  </div>
</div>

【讨论】：

这是一个很好的例子，说明为什么值得保持代码整洁而不是允许到处都有中断和空格。
@大卫。我以为这就是它。但不，没有任何改变。我是新手，这是否意味着我在其他地方有问题？
您必须更具体。使用更新的代码对您的问题进行编辑，以展示您面临的问题。仅从您的 sn-p 来看，我的编辑解决了您在问题中陈述的问题——有 3 列不再左对齐。如果您需要澄清我所做的更改，我很乐意回答您的问题。