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

Question

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

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

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

现在，这是关于轮播（HTML）的代码的一部分：

＆＃13;

＆＃13;

<div class="container">
						<div class="carousel-featured-sellers">
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
								
							</div>
							
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>

								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
							</div>
							
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
							</div>
							
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
							</div>
							
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
							</div>
							
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
							</div>
							
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
							</div>
							
						</div>
					</div>
					<script src="js/jquery-1.12.2.min.js"></script>
					<script src="js/owl.carousel.min.js"></script>
					<script>
						(function($){
				
							$('.carousel-featured-sellers').owlCarousel({
								items: 3,
								loop:true,
								margin:15,
								nav:true,
								navText: ["<span class='carousel-nav-left'><i class='fa fa-chevron-left'></i></span>","<span class='carousel-nav-right'><i class='fa fa-chevron-right'></i></span>"],
								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);
					</script>

＆＃13;

＆＃13;

＆＃13;

关于风格（CSS）的部分：

＆＃13;

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

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

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