Question

My site的页脚稍微偏离了徽标位于所有内容之下，当我想要它位于页脚的右上角和版权左下方时。谁知道我做错了什么？

代码：

.footer-distributed{
  background-color: #292c2f;
  font: bold 16px sans-serif;
  padding: 5px 5px;
  margin-top: 30px;
  width:100%
  height:20px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
  display: inline-block;
  vertical-align: middle;
}

/* Footer left */

.footer-distributed .footer-left{
  width: 40%;
}

.animedblogo-white {
    width: 200px;
    height: 70px;

}


/* Footer links */

.footer-distributed .footer-links{
  color:  #ffffff;
  margin: -50px 0 10px;
  padding: 0;
}

.footer-distributed .footer-links a{
  display:inline-block;
  line-height: 1.8;
  text-decoration: none;
  color:  inherit;
}

.footer-distributed .footer-company-name{
  color:  #8f9296;
  font-size: 14px;
  font-weight: normal;
  margin: 0;
}

.twitter-icon {
  width:100%;
}

.temple-icon {
  width:100%;
}

.leaf-icon {
  width:100%;
}


/* Footer Center */

.footer-distributed .footer-center{
  width: 35%;
}

.footer-distributed .footer-center i{
  background-color:  #33383b;
  color: #ffffff;
  font-size: 25px;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  text-align: center;
  line-height: 10px;
  margin: 50px 50px;
  vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
  font-size: 17px;
  line-height: 38px;
}

.footer-distributed .footer-center p{
  display: inline-block;
  color: #ffffff;
  vertical-align: middle;
  margin:0;
}

.footer-distributed .footer-center p span{
  display:block;
  font-weight: normal;
  font-size:14px;
  line-height:2;
}

.footer-distributed .footer-center p a{
  color:  #5383d3;
  text-decoration: none;;
}


/* Footer Right */

.footer-distributed .footer-right{
  width: 20%;
}

.footer-distributed .footer-company-about{
  line-height: 20px;
  color:  #92999f;
  font-size: 13px;
  font-weight: normal;
  margin: 0;
}

.footer-distributed .footer-company-about span{
  display: block;
  color:  #ffffff;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
}

.footer-distributed .footer-icons{
  margin-top: 25px;
}

.footer-distributed .footer-icons a{
  display: inline-block;
  width: 35px;
  height: 35px;
  cursor: pointer;
  background-color:  #33383b;
  border-radius: 2px;


  font-size: 20px;
  color: #ffffff;
  text-align: center;
  line-height: 35px;

  margin-right: 3px;
  margin-bottom: 5px;
}


@media (max-width: 880px) {

  .footer-distributed{
    font: bold 14px sans-serif;
  }

  .footer-distributed .footer-left,
  .footer-distributed .footer-center,
  .footer-distributed .footer-right{
    display: block;
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
  }

  .footer-distributed .footer-center i{
    margin-left: 0;
  }

}

    <footer class="footer-distributed">

      <div class="footer-left">

        <img src="img/adbwhite.png" alt="animedblogo-white" class="animedblogo-white"/>

        <p class="footer-links">
          <a href="#">HOME</a>
          ·
          <a href="#">ANIME</a>
          ·
          <a href="#">MANGA</a>
          ·
          <a href="#">FORUMS</a>
          ·
          <a href="#">FAQ</a>
          ·
          <a href="#">CONTACT</a>
        </p>

        <p class="footer-company-name">TheAnimeDatabase &copy; 2015, copyrights and trademarks for the anime, and other promotional materials are held by their respective owners and their use is allowed under the fair use clause of the Copyright Law.</p>
      </div>

      <div class="footer-center">

        <div>
          <i class="fa fa-map-marker"></i>
          <p><span>This site is completely ad free for your enjoyment!</span>So please consider a small donation</p>
        </div>

        <div>
          <i class="fa fa-envelope"></i>
          <p><a href="mailto:business@theanimedatabase.com">business@theanimedatabase.com</a></p>
        </div>

      </div>

      <div class="footer-right">

        <p class="footer-company-about">
          <span>STAY CONNECTED!</span>
          Make sure to check out our offical social media sites and our steam groups sponcers below, staying connected with us will fill you in with everything you need to know and more
        </p>

        <div class="footer-icons">

          <a href="https://twitter.com/TheAnimeDB_"><i class="link-twitter"></i><img src="img/twitter.png" alt="twitter-icon" class="twitter-icon"/></a>
          <a href="http://steamcommunity.com/groups/AnimeTemple"><i class="link-temple"></i><img src="img/temple.png" alt="temple-icon" class="temple-icon"/></a></a>
          <a href="http://steamcommunity.com/groups/The-Hidden-Leaf-Village"><i class="link-hidden"></i><img src="img/leaf.png" alt="leaf-icon" class="leaf-icon"/></a>

        </div>

      </div>

    </footer>

Answer 1

只需在css＆amp;中添加此1类在Html上添加1 DIV

在Css上添加以下课程     .footer_logo {display：block; height：125px;}

在Div上设置徽标

＆lt; div class =“footer_logo”＆gt;
               ＆lt; img src =“http://www.theanimedatabase.com/img/adbwhite.png”alt =“animedblogo-white”class =“animedblogo-white”/＆gt;

       ＆LT; / DIV＆GT;

.footer-distributed{
  background-color: #292c2f;
  font: bold 16px sans-serif;
  padding: 5px 5px;
  margin-top: 30px;
  width:100%
  height:20px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
  display: inline-block;
  vertical-align: middle;
}

/* Footer left */

.footer-distributed .footer-left{
  width: 40%;
}

.animedblogo-white {
    width: 200px;
    height: 70px;

}


/* Footer links */

.footer-distributed .footer-links{
  color:  #ffffff;
  margin: -50px 0 10px;
  padding: 0;
}

.footer-distributed .footer-links a{
  display:inline-block;
  line-height: 1.8;
  text-decoration: none;
  color:  inherit;
}

.footer-distributed .footer-company-name{
  color:  #8f9296;
  font-size: 14px;
  font-weight: normal;
  margin: 0;
}

.twitter-icon {
  width:100%;
}

.temple-icon {
  width:100%;
}

.leaf-icon {
  width:100%;
}


/* Footer Center */

.footer-distributed .footer-center{
  width: 35%;
}

.footer-distributed .footer-center i{
  background-color:  #33383b;
  color: #ffffff;
  font-size: 25px;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  text-align: center;
  line-height: 10px;
  margin: 50px 50px;
  vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
  font-size: 17px;
  line-height: 38px;
}

.footer-distributed .footer-center p{
  display: inline-block;
  color: #ffffff;
  vertical-align: middle;
  margin:0;
}

.footer-distributed .footer-center p span{
  display:block;
  font-weight: normal;
  font-size:14px;
  line-height:2;
}

.footer-distributed .footer-center p a{
  color:  #5383d3;
  text-decoration: none;;
}


/* Footer Right */

.footer-distributed .footer-right{
  width: 20%;
}

.footer-distributed .footer-company-about{
  line-height: 20px;
  color:  #92999f;
  font-size: 13px;
  font-weight: normal;
  margin: 0;
}

.footer-distributed .footer-company-about span{
  display: block;
  color:  #ffffff;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
}

.footer-distributed .footer-icons{
  margin-top: 25px;
}

.footer-distributed .footer-icons a{
  display: inline-block;
  width: 35px;
  height: 35px;
  cursor: pointer;
  background-color:  #33383b;
  border-radius: 2px;


  font-size: 20px;
  color: #ffffff;
  text-align: center;
  line-height: 35px;

  margin-right: 3px;
  margin-bottom: 5px;
}


@media (max-width: 880px) {

  .footer-distributed{
    font: bold 14px sans-serif;
  }

  .footer-distributed .footer-left,
  .footer-distributed .footer-center,
  .footer-distributed .footer-right{
    display: block;
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
  }

  .footer-distributed .footer-center i{
    margin-left: 0;
  }

}

    <footer class="footer-distributed">

      <div class="footer-left">
        <div class="footer_logo">
        <img src="http://www.theanimedatabase.com/img/adbwhite.png" alt="animedblogo-white" class="animedblogo-white"/>
        </div>
        <p class="footer-links">
          <a href="#">HOME</a>
          ·
          <a href="#">ANIME</a>
          ·
          <a href="#">MANGA</a>
          ·
          <a href="#">FORUMS</a>
          ·
          <a href="#">FAQ</a>
          ·
          <a href="#">CONTACT</a>
        </p>

        <p class="footer-company-name">TheAnimeDatabase &copy; 2015, copyrights and trademarks for the anime, and other promotional materials are held by their respective owners and their use is allowed under the fair use clause of the Copyright Law.</p>
      </div>

      <div class="footer-center">

        <div>
          <i class="fa fa-map-marker"></i>
          <p><span>This site is completely ad free for your enjoyment!</span>So please consider a small donation</p>
        </div>

        <div>
          <i class="fa fa-envelope"></i>
          <p><a href="mailto:business@theanimedatabase.com">business@theanimedatabase.com</a></p>
        </div>

      </div>

      <div class="footer-right">

        <p class="footer-company-about">
          <span>STAY CONNECTED!</span>
          Make sure to check out our offical social media sites and our steam groups sponcers below, staying connected with us will fill you in with everything you need to know and more
        </p>

        <div class="footer-icons">

          <a href="https://twitter.com/TheAnimeDB_"><i class="link-twitter"></i><img src="img/twitter.png" alt="twitter-icon" class="twitter-icon"/></a>
          <a href="http://steamcommunity.com/groups/AnimeTemple"><i class="link-temple"></i><img src="img/temple.png" alt="temple-icon" class="temple-icon"/></a></a>
          <a href="http://steamcommunity.com/groups/The-Hidden-Leaf-Village"><i class="link-hidden"></i><img src="img/leaf.png" alt="leaf-icon" class="leaf-icon"/></a>

        </div>

      </div>

    </footer>

HTML / CSS页脚未对齐

1 个答案: