jQuery Mobile divs left left

Question

我正在用jQuery Mobile创建一个移动网站。我想分裂页脚4部分。但最后的div滑倒。我该如何解决这个问题？

HTML

<div data-role="footer" id="footer" data-position="fixed"> 
        <div class="footer-img"></div> 
        <div class="footer-img"></div> 
        <div class="footer-img"></div> 
        <div class="footer-img"></div> 
    </div> 

CSS

.footer-img{ 
    width: 24.5%; 
    border: 1px solid red; 
    float: left; 
    height: 50px; 
} 

Answer 1

你最好的赌注是计算使用jQuery的宽度。在将盒子向左侧移动时，只尝试使用CSS的页脚解决方案可能无法正常工作。

代码

var fwidth; 

//On page loads get the innewith of the footer, divide by 4 and subtract 2 pixels then Change footer-im width 
fwidth = $("#footer").innerWidth()/4 - 2; 
$(".footer-img").width(fwidth); 

//On resizing the the browser window get the innewith of the footer, divide by 4 and subtract 2 pixels then Change footer-im width 
$(window).resize(function() { 
fwidth = $("#footer").innerWidth()/4 - 2; 
$(".footer-img").width(fwidth); 
}); 

Demo