我使用名为owlcarousel
的插件制作了几个图像拼贴的滑块。当我尚未缩小谷歌浏览器,歌剧和野生动物园的屏幕时,拼贴画会正确显示。
当屏幕正常时,我还在firefox 37.0.2和Internet Explorer 11上测试了代码。
这是我用来实现轮播的代码:
.featured-sellers-collage {
width: 380px;
}
.featured-sellers-collage .div1 p {
top: 0;
bottom: 0;
float:left;
width: 190px;
}
.featured-sellers-collage .div1 p img {
width: 100%;
}
<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:25,
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>
请告诉我如何解决这个问题。感谢
答案 0 :(得分:1)
将float: right;
添加到代码的div2
将解决firefox和Internet Explorer上的问题。
现在关于响应性问题是由于修复宽度,更好的使用百分比。
试试这段代码:
body {
width: 380px;
}
.featured-sellers-collage {
width: 100%;
}
.featured-sellers-collage .div1 p {
top: 0;
bottom: 0;
float:left;
width: 50%;
}
.featured-sellers-collage .div1 p img {
width: 100%;
}
.featured-sellers-collage .div2 {
flaot: right;
}
&#13;