jQuery Girl
  1. jQuery Girl
  3. Créer un collage pour un carrousel à base de hibou
Intereting Posts
Popups nesteds jQuery Mobile 1.4 Comment puis-je supprimer tous les atsortingbuts des tags sauf ceux spécifiques? comprendre $ vs jQuery in iife au lieu de $ Le calcul de la hauteur à l’aide de jQuery diffère dans Firefox et Chrome Chrome ne peut plus journaliser les objects jQuery inspectables à partir de scripts Comment mettre en cache l’object JavaScript Date? Comment créer dynamicment une liste non ordonnée en JavaScript? jQuery Déplacer l’élément d’une zone de sélection à une autre tout en conservant l’ordre d’affichage Style de programmation jQuery? Existe-t-il l’équivalent de jQuery Mobile au ViewPager d’Android? jQuery: Changer le CSS sur un élément chargé avec ajax? text.sortingm () ne peut vraiment pas fonctionner dans IE8 Comment créer un formulaire .NET MVC dans un modal à l’aide de jQuery avec validation Utiliser ajax pour accéder au Web à partir d’un fichier local jquery simple image slider w / ajax

Créer un collage pour un carrousel à base de hibou

J’utilise un plugin appelé owlcarousel pour créer un carrousel. Le carrousel et le collage ont été réalisés. Le travail a été testé sur Google Chrome, Safari, Opera et Firefox. Tout fonctionne bien pour tous sauf Firefox.

Lorsque le carrousel fonctionne correctement, le message suivant s’affiche: Affichage du carrousel sur Google Chrome

Sur Firefox, voici à quoi ça ressemble: Affichage du carrousel sur Firefox

Maintenant, voici la partie de mon code concernant le carrousel (HTML): 

 
 
 
 
 
 
 
 
  
 
 
 
 
 
 
 
  
 
 
 
 
 
 
 
  
 
 
 
 
 
 
 
  
 
 
 
 
 
 
 
  
 
 
 
 
 
 
 
  
 
 
 
 
 
 
 
  
 
 
 
    (function($){ $('.carousel-featured-sellers').owlCarousel({ items: 3, loop:true, margin:15, nav:true, navText: ["",""], dots: true, responsive:{ 0:{ items:1 }, 430:{ items:2 }, 800:{ items:3 }, 1400:{ items:4 }, 1800:{ items:6 }, 2400:{ items:7 }, 3000:{ items:9 } } }) })(jQuery);

La partie concernant le style (CSS): 

 .featured-sellers-collage .div1{ width: 100%; } .featured-sellers-collage .div1 p { margin-bottom: 0; margin-top: 0; width:50%; } .featured-sellers-collage .div2 { width: 100%; margin-bottom: 0; } .featured-sellers-collage .div1 p:first-child { float:left; } .featured-sellers-collage .div1 p:last-child { float:right; }

S’il vous plaît, laissez-moi savoir comment résoudre ce problème.

Votre div2 doit faire un clear puisque vous faites flasher les balises p dans div1, clear: both; . Vous pouvez simplement l’append à votre classe .div2 .deatured-sellers-collage. 

 .featured-sellers-collage .div2 { width: 100%; margin-bottom: 0; clear: both; }

Je crois que cela résoudra votre problème.