HTML CSS, wie zwei divs einzeln nacheinander ausrichten und Breite dynamisch ändern

Question

Ich habe ein HTML-Formular, und müssen gelesen und blauen Kreis einzeln gelesen (vertikal ausgerichtet), und wenn Wert innerhalb des Kreises eingegeben wird, muss ich dynamisch mit CSS Änderungsbreite zu value..i zu erhalten gewünscht versuchen mit display: inline-table und Block, aber es funktioniert nicht ... hier ist, dass Bild von dem, was ich und was ich brauche zu bekommen:

http://imgur.com/Jt1nuh3 

Von Bild muss ich links und Breite auf rotem und blauem Kreis automatisch ändern, der abhängig vom eingegebenen Kreiswert (+999) ist und bi-inline wie im unten Bild gebrauchen muss ... ich benutze inline für css wie in der ersten Seite.

Hier ist mein HTML-Code:

<!-- page device statistics --> 
    <div class="devicestat" title="Online: 0"> 
     <!-- page device title --> 
     <div class="stat-name"> 
      <div class="stat-name-devices">Devices</div> 
      <!-- android device --> 
      <div class="stat-badget-android" title="Android">+0</div> 
      <!-- enigma device --> 
      <div class="stat-badget-enigma" title="Enigma">+0</div> 

      <div class="stat-number">0</div> 
     </div> 
    </div> 

Answer 1

Sie könnten versuchen, die CSS für die roten und blauen Kreisen Einstellung float haben: right; und klar: beides; auf diese Weise sind sie immer auf der rechten Seite ausgerichtet, unabhängig davon, welche Nummer sie sind. Beispiel unten:

.stat-badget-android{ 
float:right; 
clear:both; 
} 
.stat-badget-enigma{ 
float:right; 
clear:both; 
} 

Ich werde Ihre CSS und HTML zu sehen, wenn Sie ein besseres Beispiel möchten.