2016-04-04 16 views
0

owlcarouselという名前のプラグインを使用して、いくつかの画像コラージュのスライダを作成しています。 Google Chrome、オペラ、サファリの画面をまだ縮小していない場合、コラージュが正しく表示されます。 When the screen is normal (not reduced)owlcarouselを使用してコラージュ画像を表示する

画面が小さくなると、表示画面が正常である場合、私はまた、Firefoxの37.0.2上のコードおよびInternet Explorer 11を試験 When the screen is reduced

完全に異なっています。 Internet Explorerのオン The display on firefox when the screen is normal

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

この私がカルーセルを実現するために使用するコード:Firefoxのオン

.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

は親切に私に知らせて私はどのようにcaその問題を解決する。ありがとう

+1

これはあなたのイメージで起きているかもしれない画像に修正幅を追加width.Dotn't。画像を反応させる。 –

答えて

1

コードのdiv2float: right;を追加すると、FirefoxとInternet Explorerの問題が解決します。

ここでは、応答の問題は、フィックスの幅のために、より良い使用率です。

は、このコードを試してみてください。

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

関連する問題