Ajout de DIV à la verticale

Question

Dans le code ci-dessous, progressDiv est le DIV qui commence à se construire. Mais il se construit verticalement ... j'en ai besoin horizontalement ... Que shud je fais?

var progressDiv = document.getElementById('progressDiv') 
    var div = document.createElement('div'); 

    div.style.display = 'block'; 
    div.style.cssFloat = 'left'; 
    div.style.width = '10px'; 
    div.style.height = '10px'; 
    div.style.backgroundColor = 'red'; 
    div.style.border = '1px solid black'; 

    progressDiv.appendChild(div); 
    if (progressDiv.childNodes.length == 20) 
     while (progressDiv.hasChildNodes()) 
      progressDiv.removeChild(progressDiv.firstChild); 

Answer 1

div.style.cssFloat = 'left'; devrait être div.style.float = 'left';

Answer 2

Ah, le bon vieux IE. Si vous faites le div un span, définissez le style à inline-block, et laisser tomber le flotteur, il devrait fonctionner:

var progressDiv = document.getElementById('progressDiv'); 
var span = document.createElement('span'); 

span.style.display = 'inline-block'; 
span.style.width = '10px'; 
span.style.height = '10px'; 
span.style.backgroundColor = 'red'; 
span.style.border = '1px solid black'; 

progressDiv.appendChild(span); 
if (progressDiv.childNodes.length == 20) { 
    while (progressDiv.hasChildNodes()) { 
     progressDiv.removeChild(progressDiv.firstChild); 
    } 
} 

Pourquoi un span plutôt qu'un div? Parce que IE n'aime pas que vous essayiez d'insérer des éléments qui sont bloqués par défaut, même si vous changez leur display. Mais c'est bien de faire des blocs par défaut en ligne. Je ne sais pas si le fait de laisser tomber le flotteur va gâcher quelque chose d'autre que vous essayez de faire, par contre. Mais si vous essayez juste de faire une barre de progression, ça devrait aller si vous gardez le progressDiv assez large.

Answer 3

div.style.display = 'inline'

a marché pour moi.