为用owlcarousel制作的旋转木马创建拼贴画 [英] Create a collage for a carousel made with owlcarousel
本文介绍了为用owlcarousel制作的旋转木马创建拼贴画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用一个插件 owlcarousel 创建一个轮播。旋转木马和拼贴已经制作。该工作已在Google Chrome，Safari，Opera和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.jpgalt =/>< / p> < p>< img src =images / 189x324-5.jpgalt =/>< / p> < / div> < div class =div2> < img src =images / 380x325-6.jpgalt =/> < / div> < / div> < div class =featured-sellers-collage> < div class =div1> < p>< img src =images / 189x324-4.jpgalt =/>< / p> < p>< img src =images / 189x324-5.jpgalt =/>< / p> < / div> < div class =div2> < img src =images / 380x325-6.jpgalt =/> < / div> < / div> < div class =featured-sellers-collage> < div class =div1> < p>< img src =images / 189x324-4.jpgalt =/>< / p> < p>< img src =images / 189x324-5.jpgalt =/>< / p> < / div> < div class =div2> < img src =images / 380x325-6.jpgalt =/> < / div> < / div> < div class =featured-sellers-collage> < div class =div1> < p>< img src =images / 189x324-4.jpgalt =/>< / p> < p>< img src =images / 189x324-5.jpgalt =/>< / p> < / div> < div class =div2> < img src =images / 380x325-6.jpgalt =/> < / div> < / div> < div class =featured-sellers-collage> < div class =div1> < p>< img src =images / 189x324-4.jpgalt =/>< / p> < p>< img src =images / 189x324-5.jpgalt =/>< / p> < / div> < div class =div2> < img src =images / 380x325-6.jpgalt =/> < / div> < / div> < div class =featured-sellers-collage> < div class =div1> < p>< img src =images / 189x324-4.jpgalt =/>< / p> < p>< img src =images / 189x324-5.jpgalt =/>< / p> < / div> < div class =div2> < img src =images / 380x325-6.jpgalt =/> < / div> < / div> < div class =featured-sellers-collage> < div class =div1> < p>< img src =images / 189x324-4.jpgalt =/>< / p> < p>< img src =images / 189x324-5.jpgalt =/>< / p> < / div> < div class =div2> < img src =images / 380x325-6.jpgalt =/> < / 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 response：{0：{items：1}，430：{items：2}，800：{item：1}，class ='fa fa-chevron-right'>< / i>< / span> {items：3}，1400：{items：4}，1800：{items：6}，2400：{items：7}，3000：{items：9}}}）}）（jQuery）; < / script>
）：
.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;}
请让我知道如何解决这个问题。
解决方案
您的div2需要清除，因为您在div1中浮动p标签， clear：both; 。您只需将它添加到您的.featured-sellers-collage .div2类中，如下所示：
.featured-sellers-collage .div2 {
width：100％;
margin-bottom：0;
clear：both;
}
我相信这会解决您的问题。
I am using a plugin called owlcarousel to create a carousel. The carousel and the collage have been made. The work has been tested on Google Chrome, Safari, Opera andd Firefox. Everything works fine for all of them except Firefox.
When the carousel is working fine, this how is displayed :
On Firefox,this is how, it looks:
Now, this is the part of my code concerning the carousel (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>
The part, concerning the 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;
}
Please, let me know how to solve that issue.
解决方案
Your div2 needs to do a clear since you are floating the p tags in div1, clear: both;. You can just add it to your .featured-sellers-collage .div2 class, like so:
.featured-sellers-collage .div2 {
width: 100%;
margin-bottom: 0;
clear: both;
}
I believe this will fix your problem.
这篇关于为用owlcarousel制作的旋转木马创建拼贴画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
