3列页脚坐在左侧- html

Question

我试图有一个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>

​

Answer 1

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

​

* {
  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>

​