我正在嘗試創建一個響應式網站。在移動視圖中,除了頁腳外,其他內容都看起來不錯,但內容看起來並不完美。 這裏有截圖。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;
}
}
如果有比我的方式比較簡單的方法嘗試,我會非常感謝。 謝謝!