为owlcarousel制作的旋转木马创建拼贴画

我正在使用一个名为owlcarousel的插件来创建一个旋转木马。 旋转木马和拼贴画已经制作完成。 该作品已在Google Chrome，Safari，Opera和Firefox上进行了测试。 除了Firefox之外，所有这些都可以正常工作。

当旋转木马工作正常时，显示如下：

在Firefox上，它看起来是这样的：

现在，这是关于轮播（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);  

关于样式（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; } 

请让我知道如何解决这个问题。

Answer 1

你的div2需要清楚，因为你在div1中浮动p标签， clear: both; 。 您可以将它添加到.featured-sellers-collage .div2类中，如下所示：

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

我相信这会解决你的问题。