jQuery Mobile divs float 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