页脚文字的定位

时间：2017-12-05 05:25:37

标签： html css

我正在尝试添加类似于Airbnb的页脚。我能够做前两列。然而，第三个总是略低于其余部分。我试过了： 位置：绝对（但这会让它消失） 位置：相对（这工作正常，但它从其他两列中删除链接）。 浮动：左右，但不允许我向上移动。

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

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

5 个答案:

答案 0 :(得分：1)

这些是造成问题的原因：

  1. positi代替position:relative
    2. 中的col-3
  2. float:left至col-2以及

    3. ＆＃13;
    ＆＃13; 
    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;
}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 1 :(得分：0)

您已将col-1和col-3定义为float，您还需要将col-2定义为float：left。请参阅我修改过的以下代码。

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;
  float: left;
}
.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>

答案 2 :(得分：0)

基本上，您在float: left和.col-2上遗漏了.col-3。这将使第三个链接组位于顶部。然后，您可以在line-height上设置.col-3，以确保它与其他两个组水平对齐。

另请注意，在下面的代码段中，我在主体上设置了最小宽度，以确保列不会换行。

body {
  min-width: 800px;
}

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;
  float: left;
}

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

.col-3 {
  padding-top: 15px;
  padding-left: 50px;
  padding-bottom: 100px;
  bottom: 100px;
  color: white;
  font-weight: bold;
  display: table;
  float: left;
  line-height: 40px;
}

.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>

答案 3 :(得分：0)

请不要太复杂。几行风格很简单。查看下面的例子。

＆＃13;
＆＃13; 
footer {
width: 100%;
  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 */
  
  color: white;
  line-height: 22px;
  font-weight: normal;
  display: table;
 }

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

.col-1,
.col-2,
.col-3 {
 width: 30%;
 margin: 0 1.65%;
 float: left;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

您应该使用box-sizing: border-box;来防止因填充而导致宽度增加。 

footer *{
   box-sizing:border-box;
}

使用Flexbox更好地对齐和定位。

.footer{
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row /* works with row or column */
   flex-direction: row;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

Fiddle Demo here

相关问题
最新问题