我希望页脚适合 chrome 浏览器

Question

这两张图显示了我的问题，第一张图是在除 Chrome 之外的其他浏览器中显示的页脚。

第二张图片是 Chrome.

中页脚的样子

我应该怎么做才能让这个页脚适合 chrome 浏览器？

footer {
 width:1050px;
 height:auto;
 margin: 0 auto;
 posion: absolute;
 
 }
.footer-distributed{
 background-color: #292c2f;
 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
 box-sizing: border-box;
 width: 100%;
 text-align: left;
 font: bold 16px sans-serif;

 padding: 10px 25px 5px 25px;
 margin-top: 80px;
}

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

/* Footer left */

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

/* The company logo */

.footer-distributed h3{
 color:  #ffffff;
 font: normal 36px 'Cookie', cursive;
 margin: 0;
}

.footer-distributed h3 span{
 color:  #5383d3;
}

/* Footer links */

.footer-distributed .footer-links{
 color:  #ffffff;
 margin: 20px 0 12px;
 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;
}

/* Footer Center */

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

.footer-distributed .footer-center i{
 background-color:  #33383b;
 color: #ffffff;
 font-size: 25px;
 width: 38px;
 height: 38px;
 border-radius: 50%;
 text-align: center;
 line-height: 42px;
 margin: 10px 15px;
 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-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: 12px;
 margin-bottom: 5px;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旅游导航</title>
<meta name="description" content="北欧旅游" />
<meta name="keywords" content="各种索引条目" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/pgwslider.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>


</head>

<body> 
<div class="wrapper">
 

<footer class="footer-distributed"><!--footer-->

   <div class="footer-left">

    <h3>Feito<span>AB</span></h3>

    <p class="footer-company-name">Feito AB &copy; 2015</p>
   </div>

   <div class="footer-center">

    <div>
     <i class="fa fa-map-marker"></i>
     <p><span>Mejerigatan</span> Göteborg</p>
    </div>

    <div>
     <i class="fa fa-phone"></i>
     <p>+1 555 123456</p>
    </div>

   </div>

   <div class="footer-right">
  <div class="footer-icons">

     <a href="#">
                     <img src="img/footer/1.jpg" alt="facebook">
                    </a>
     <a href="#"><img src="img/footer/2.jpg" alt="facebook"></a>
     <a href="#"><img src="img/footer/3.jpg" alt="linkedin"></a>
     <a href="#"><img src="img/footer/4.jpg" alt="mewo"></a>

    </div>

   </div>
            

  </footer><!--footer-->   
</div><!--wrapper-->

</body>
</html>

Answer 1

看起来你那里有三列。我建议您为此使用网格系统。

如果您不想使用网格系统，您可以使用它。 http://jsbin.com/nagiyopeje/1

Answer 2

更好的方法是使用网格系统，您可以选中 bootstrap 3 (http://getbootstrap.com/css/#grid) 或类似的其他选项。

为了回答您的问题，试试这个：

从您的 css

中删除它

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

并为此修改右页脚css（去掉宽度）：

.footer-distributed .footer-right{
    float:right;
}

https://jsfiddle.net/56L67ax4/2/

我希望页脚适合 chrome 浏览器

I want footer to fit chrome browser

html

css

google-chrome

footer