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