2016-04-04 10 views
0

Ich mache einen Schieberegler von mehreren Collagen von Bildern mit dem Plugin mit dem Namen owlcarousel. Die Collage wird korrekt angezeigt, wenn ich den Bildschirm bei Google Chrome, Oper und Safari noch nicht verkleinert habe. When the screen is normal (not reduced)Verwenden Eulenkarussell, um Collage Bild

Sobald der Bildschirm klein ist, ist die Anzeige ganz andere When the screen is reduced

ich auch den Code auf Firefox 37.0.2 und Internet Explorer 11 getestet, wenn der Bildschirm normal ist.

auf Firefox: The display on firefox when the screen is normal

Auf Internet Explorer: The display on firefox when the screen is normal (the collages do not have any margin set)

Dies ist der Code, den ich das Karussell zu erkennen, verwenden:

.featured-sellers-collage { 
 
    width: 380px; 
 
} 
 

 
.featured-sellers-collage .div1 p { 
 
\t top: 0; 
 
\t bottom: 0; 
 
\t float:left; 
 
\t width: 190px; 
 
} 
 
.featured-sellers-collage .div1 p img { 
 
\t 
 
\t width: 100%; 
 
}
<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 </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:25, 
 
\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> 
 
\t \t \t \t \t \t

Bitte lassen Sie mich wissen, wie ich ca n dieses Problem lösen. Dank

+1

könnte dies Ihres Bildes passieren width.Dotn't fix Breite Bild hinzufügen. mache die Bilder ansprechend. –

Antwort

1

ein float: right; zum div2 des Codes hinzufügen, wird das Problem auf Firefox und Internet Explorer lösen.

Jetzt in Bezug auf die Reaktionsfähigkeit Problem aufgrund der festen Breite, besser Prozent verwenden.

Versuchen Sie diesen Code:

body { 
 
\t width: 380px; 
 
} 
 
.featured-sellers-collage { 
 
    width: 100%; 
 
} 
 

 
.featured-sellers-collage .div1 p { 
 
\t top: 0; 
 
\t bottom: 0; 
 
\t float:left; 
 
\t width: 50%; 
 
} 
 
.featured-sellers-collage .div1 p img { 
 
\t 
 
\t width: 100%; 
 
} 
 
.featured-sellers-collage .div2 { 
 
\t flaot: right; 
 
}

Verwandte Themen