HTML页脚响应未完全对齐

我正在尝试创建一个响应式网站。在移动视图中，除了页脚外，其他内容都看起来不错，但内容看起来并不完美。这里有截图。HTML页脚响应未完全对齐

这是桌面视图

这是移动视图

正如你所看到的一切都搞砸了。这里是我的代码

<div id="footer" class="navbar navbar-default navbar-fixed-bottom"> 
      <div class="container-fluid"> 
       <div class="navbar-text pull-left"> 
        <p id="color"> Supported By </p> 
       </div> 
       <div class="navbar-text pull-left"> 
        <a href="http://www.kafd.jo/" target="_blank"><img class="img-responsive" src="Images/King-Abdullah-Fund-Development-Jordan-360-Panorma-Video.png" id="imageclass1"></a> 
       </div> 
       <div class="navbar-text pull-left"> 
        <a href="http://visitjordan.com/" target="_blank"><img class="img-responsive" src="Images/Jordan-Tourism-Board-Visit-Jordan-Lolo.png" id="imageclass1"></a> 
       </div> 

       <div class="navbar-text" id="centered"> 
        <a href="http://www.360mea.com/request-a-recording/" target="_blank"><img class="img-responsive" src="Images/Request-a-Recording-Jordan-360-Panorama.png" id="imagecenter"></a> 
       </div> 

       <div class="navbar-text pull-right"> 
        <a href="http://www.oasis500.com/" target="_blank"><img class="img-responsive" src="Images/Oasis-500-logo-360.png" id="imageclass"></a> 
       </div> 
       <div class="navbar-text pull-right"> 
        <a href="http://www.ayla.com.jo/" target="_blank"><img class="img-responsive" src="Images/Ayla-Logo.png" id="imageclass1"></a> 
       </div> 
       <div class="navbar-text pull-right"> 
        <a href="http://www.manaseergroup.com/" target="_blank"><img class="img-responsive" src="Images/Manaser.png" id="imageclass2"></a> 
       </div> 
       <div class="navbar-text pull-right"> 
        <p id="color">Partners</p> 
       </div> 
      </div> 
     </div>

而对于CSS

#centered { 
    position: absolute; 
    overflow: visible; 
    left: 40%; 
} 
#imagecenter{ 
    max-width: 200px; 
    max-height: 200px; 
} 
#imageclass1{ 
    max-width: 90px; 
    max-height: 90px; 
} 
#imageclass2{ 
    max-width: 70px; 
    max-height: 60px; 
}

这是我的移动视图

@media screen and (min-width: 400px) { 
    body { 
     overflow: auto; 
    } 
    .img-responsive { 
     position:relative; 
     max-width: 20%; 
    } 
    #color{ 
     font-size: 5px; 
    } 
    #footer{ 
     max-height: 200px; 
    } 
}

如果有比我的方式比较简单的方法尝试，我会非常感谢。谢谢！

来源

2015-12-30 MuaathAli

忘记每个元素的左拉右，并使用col的布局（col偏移将有助于居中的一个）。

来源

2015-12-30 10:15:26

Bootstrap为设计响应式网站提供了简单的方法。您只需将类添加到您的div，引导程序的css将完成这项工作！你可以在这里找到它： http://getbootstrap.com/

来源

2015-12-30 08:39:09

HTML页脚响应未完全对齐

回答

相关问题