jQuery Mobile divs float links

Question

Ich erstelle eine mobile Website mit jQuery Mobile. Ich möchte Fußzeile 4 teilen. Aber das letzte div rutscht runter. Wie kann ich dieses Problem beheben?

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

Ihre beste Wette ist, die Breite mit JQuery zu berechnen. Versuchen Sie CSS nur Lösungen für die Fußzeile, während Sie die Boxen nach links schweben, funktioniert möglicherweise nicht gut.

-Code

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