html - 页脚文本的定位

Question

我正在尝试添加类似于 Airbnb 的页脚。我已经能够完成前两栏。然而，第三个总是略低于其余的。我试过了: position:absolute(但这会使它消失) position:relative(这工作正常，但它删除了其他两列的链接)。 float :左右浮动，但不允许我将其向上移动。

如果有人能帮助我，我已经不知道该怎么做了，那就太好了。这是我的代码和我所做的图像。

footer {
  border-style: solid;
  border-color: grey;
  border-width: 0.25px;
  background-color: #EF6248;
  -webkit-box-shadow: 0 5px 10px -6px black;
  -moz-box-shadow: 0 5px 10px -6px black;
  box-shadow: 0 5px 10px -6px black;
  /* NOTE: shadow of footer */
  padding-bottom: 200px;
  margin-top: 10%;
  /* NOTE: where the footer sits on page */
}

.footer-links {
  color: white;
}

.footer-links:hover {
  color: black;
}

.col-1 {
  padding-left: 150px;
  padding-top: 15px;
  line-height: 40px;
  color: white;
  font-family: raleway;
  font-weight: bold;
  display: table;
  float: left;
}

.col-1 span {
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
}

.col-2 {
  padding-top: 15px;
  padding-left: 130px;
  line-height: 40px;
  color: white;
  font-family: raleway;
  font-weight: bold;
  display: table;
  position: relative;
}

.col-2 span {
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
}

.col-3 {
  padding-top: 15px;
  padding-left: 550px;
  padding-bottom: 100px;
  bottom: 100px;
  color: white;
  font-weight: bold;
  display: table;
  float: left;
  positi
}

.col-3 span {
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
}

<footer>


  <div class="col-1">
    Revel
    <hr>
    <span><a href="#" class="footer-links"> About us       </a></span>
    <span><a href="#" class="footer-links"> Contact us     </a></span>
    <span><a href="#" class="footer-links"> FAQ            </a></span>
    <span><a href="#" class="footer-links"> Careers        </a></span>
  </div>

  <div class="col-2">
    Event Host
    <hr>
    <span> <a href="#" class="footer-links"> Why use Revel  </a></span>
    <span> <a href="#" class="footer-links"> test           </a></span>
    <span> <a href="#" class="footer-links"> test           </a></span>
    <span> <a href="#" class="footer-links"> Join Revel     </a></span>
  </div>

  <div class="col-3">
    Event Service
    <hr>
    <span><a href="#" class="footer-links"> Why partner with Revel  </a></span>
    <span><a href="#" class="footer-links"> Guidebooks              </a></span>
    <span><a href="#" class="footer-links"> FAQ                     </a></span>
    <span><a href="#" class="footer-links"> Partner with Revel      </a></span>
  </div>


</footer>

enter image description here

Answer 1

这些是导致问题的原因:

1. positi 而不是 col-3
中的 position:relative
2. float:left 到 col-2 也是

footer {
  border-style: solid;
  border-color: grey;
  border-width: 0.25px;
  background-color: #EF6248;
  -webkit-box-shadow: 0 5px 10px -6px black;
  -moz-box-shadow: 0 5px 10px -6px black;
  box-shadow: 0 5px 10px -6px black;
  /* NOTE: shadow of footer */
  padding-bottom: 200px;
  margin-top: 10%;
  border: 10px solid green;
  /* NOTE: where the footer sits on page */
}

.footer-links {
  color: white;
}

.footer-links:hover {
  color: black;
}

.col-1 {
  padding-left: 150px;
  padding-top: 15px;
  line-height: 40px;
  color: white;
  font-family: raleway;
  font-weight: bold;
  display: table;
  float: left;
}

.col-1 span {
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
}

.col-2 {
  padding-top: 15px;
  padding-left: 130px;
  line-height: 40px;
  color: white;
  font-family: raleway;
  font-weight: bold;
  display: table;
  position: relative;
  float: left;
}

.col-2 span {
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
}

.col-3 {
  padding-top: 15px;
  padding-left: 130px;
  line-height: 40px;
  color: white;
  font-family: raleway;
  font-weight: bold;
  display: table;
  position: relative;
  float: left;
}

.col-3 span {
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
}

<footer>


  <div class="col-1">
    Revel
    <hr>
    <span><a href="#" class="footer-links"> About us       </a></span>
    <span><a href="#" class="footer-links"> Contact us     </a></span>
    <span><a href="#" class="footer-links"> FAQ            </a></span>
    <span><a href="#" class="footer-links"> Careers        </a></span>
  </div>

  <div class="col-2">
    Event Host
    <hr>
    <span> <a href="#" class="footer-links"> Why use Revel  </a></span>
    <span> <a href="#" class="footer-links"> test           </a></span>
    <span> <a href="#" class="footer-links"> test           </a></span>
    <span> <a href="#" class="footer-links"> Join Revel     </a></span>
  </div>

  <div class="col-3">
    Event Service
    <hr>
    <span><a href="#" class="footer-links"> Why partner with Revel  </a></span>
    <span><a href="#" class="footer-links"> Guidebooks              </a></span>
    <span><a href="#" class="footer-links"> FAQ                     </a></span>
    <span><a href="#" class="footer-links"> Partner with Revel      </a></span>
  </div>


</footer>