Javascript Girl
  1. Javascript Girl
  3. La position Div change lors de l'ajout de contenu
Intereting Posts
WebRTC et Websockets. Y a-t-il une différence Le code le plus court pour vérifier si un nombre est dans une gamme JavaScript Ressource externe non chargée par AngularJs J'ai essayé de prototyper une méthode length () pour Object et a cassé jQuery – comment? Quand dois-je utiliser `return` dans les fonctions Arrow 6? AngularJS – Besoin d'une combinaison de $ routeChangeStart et $ locationChangeStart Pourquoi la console JS renvoie un extra indéfini? Plugin de validation jQuery: validez le format de date personnalisé Comment supprimer des espaces blancs supplémentaires en utilisant javascript ou jquery? Comment implémenter une fonction de touche avec un élément de création dynamique avec JQuery? Compter le nombre d'enregistrements dans un magasin d'objets dans indexedDB JQuery: comblez des mots en temps réel Dojo dgrid multiple cells edit Comment actualiser automatiquement les flux de nouvelles Ruby on Rails: "n'a pas pu trouver le fichier 'jquery.ui.datepicker'"

La position Div change lors de l'ajout de contenu

Après le problème d'hier ( les divs Equidistants DOM avec les blocs en ligne et le texte justifient ne fonctionneront pas lors de l'insertion par JS ), qui a été assez amusant pour m'aider à comprendre, j'ai rencontré un autre comportement de navigateur étrange.

Violoncelle mise à jour ici: http://jsfiddle.net/xmajox/NUJnZ/

Lorsque tout type de contenu est ajouté (bloc ou en ligne) aux divs, ils se déplacent vers le bas. Lorsque toutes les divs ont du contenu, elles se retrouvent dans leurs endroits corrects.

J'ai essayé de les démarrer tous avec un peu de divin de contenu et ensuite de changer le texte de cet enfant, mais il réagit de la même manière.

Des idées?

Ajouter vertical-align: top vers ces div: 

 .rowSample > div { background: none repeat scroll 0 0 black; border: 1px solid yellow; color: white; display: inline-block; height: 50px; vertical-align: top; width: 50px; }

Parce que ce sont des éléments avec display:inline-block ils sont alignés comme des éléments en ligne mais ont des dimensions explicites. Par exemple, les balises <img> par défaut ont un mode d'affichage du inline-block ligne, afin de les aligner dans le texte que vous souhaitez spécifier une propriété d' vertical-align souhaitée.

Jetez un oeil à l'exemple de violon: http://jsfiddle.net/a6Hu2/

Je suis d'accord avec @Keaukraine, vous devez ajouter un 

 vertical-align:top;

Cependant, vous aurez besoin d'un code spécifique pour que cela fonctionne sur Internet Explorer 7 (qui en 2012 est toujours un navigateur majeur). 

 /* For IE 7 */ zoom: 1; *display: inline;

Voir cet article pour plus de détails: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/