javascript - 为使用 owlcarousel 制作的旋转木马创建拼贴画

Question

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

当轮播正常工作时，显示方式如下:

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

现在，这是我的代码中有关轮播的部分 (HTML):

<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>

关于样式(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 中 float p 标签，clear: both;。您可以将它添加到您的 .featured-sellers-collage .div2 类中，如下所示:

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

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