2016-04-02 4 views
0

Ich verwende ein Plugin namens owlcarousel, um ein Karussell zu erstellen. Das Karussell und die Collage wurden gemacht. Die Arbeit wurde in Google Chrome, Safari, Opera und Firefox getestet. Alles funktioniert gut für alle außer Firefox.Erstellen Sie eine Collage für ein Karussell mit Eulenkarussell

Wenn das Karussell funktioniert gut, das wie angezeigt: Display of the carousel on Google Chrome

auf Firefox, das ist, wie es aussieht: Display of the carousel on Firefox

Nun, das ist der Teil meines Code ist in Bezug auf das Karussell (HTML):

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

 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t <div class="div2"> 
 
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <div class="featured-sellers-collage"> 
 
\t \t \t \t \t \t \t \t <div class="div1"> 
 
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p> 
 
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t <div class="div2"> 
 
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <div class="featured-sellers-collage"> 
 
\t \t \t \t \t \t \t \t <div class="div1"> 
 
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p> 
 
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t <div class="div2"> 
 
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <div class="featured-sellers-collage"> 
 
\t \t \t \t \t \t \t \t <div class="div1"> 
 
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p> 
 
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t <div class="div2"> 
 
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <div class="featured-sellers-collage"> 
 
\t \t \t \t \t \t \t \t <div class="div1"> 
 
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p> 
 
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t <div class="div2"> 
 
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <div class="featured-sellers-collage"> 
 
\t \t \t \t \t \t \t \t <div class="div1"> 
 
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-4.jpg" alt=""/></p> 
 
\t \t \t \t \t \t \t \t \t <p><img src="images/189x324-5.jpg" alt=""/></p> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t <div class="div2"> 
 
\t \t \t \t \t \t \t \t \t <img src="images/380x325-6.jpg" alt=""/> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <script src="js/jquery-1.12.2.min.js"></script> 
 
\t \t \t \t \t <script src="js/owl.carousel.min.js"></script> 
 
\t \t \t \t \t <script> 
 
\t \t \t \t \t \t (function($){ 
 
\t \t \t \t 
 
\t \t \t \t \t \t \t $('.carousel-featured-sellers').owlCarousel({ 
 
\t \t \t \t \t \t \t \t items: 3, 
 
\t \t \t \t \t \t \t \t loop:true, 
 
\t \t \t \t \t \t \t \t margin:15, 
 
\t \t \t \t \t \t \t \t nav:true, 
 
\t \t \t \t \t \t \t \t 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>"], 
 
\t \t \t \t \t \t \t \t dots: true, 
 
\t \t \t \t \t \t \t \t responsive:{ 
 
\t \t \t \t \t \t \t \t \t 0:{ 
 
\t \t \t \t \t \t \t \t \t \t items:1 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t 430:{ 
 
\t \t \t \t \t \t \t \t \t \t items:2 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t 800:{ 
 
\t \t \t \t \t \t \t \t \t \t items:3 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t 1400:{ 
 
\t \t \t \t \t \t \t \t \t \t items:4 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t 1800:{ 
 
\t \t \t \t \t \t \t \t \t \t items:6 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t 2400:{ 
 
\t \t \t \t \t \t \t \t \t \t items:7 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t 3000:{ 
 
\t \t \t \t \t \t \t \t \t \t items:9 
 
\t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t }) 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t })(jQuery); 
 
\t \t \t \t \t </script>

Der Teil, über den Stil (CSS):

.featured-sellers-collage .div1{ 
 
\t width: 100%; 
 
} 
 
.featured-sellers-collage .div1 p { 
 
\t margin-bottom: 0; 
 
\t margin-top: 0; 
 
\t width:50%; 
 
} 
 

 
.featured-sellers-collage .div2 { 
 
\t width: 100%; 
 
\t margin-bottom: 0; 
 
} 
 
.featured-sellers-collage .div1 p:first-child { 
 
\t float:left; 
 
} 
 
.featured-sellers-collage .div1 p:last-child { 
 
\t float:right; 
 
}

Bitte, lassen Sie mich wissen, wie das Problem zu lösen.

Antwort

1

Ihr div2 muss einen Löschvorgang durchführen, da Sie die p-Tags in div1, clear: both; schweben lassen. Sie können es einfach hinzufügen Ihre .featured-Verkäufer-Collage .div2 Klasse, etwa so:

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

Ich glaube, das Ihr Problem zu beheben.

Verwandte Themen