0

我正在 flickity 中研究这个解决方案（js 滑块）

http://codepen.io/djnutron/pen/jWozOv

检查元素后，我想知道为什么它要调整图像周围的 div 的大小。图像为 1900x850。但是，浏览器以某种方式将周围的 div 调整为 1903x848？

我试过添加

padding 0 , margin 0, border 0

等到所有的div。

CSS代码是：

html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
}

div.gallery {
    height: 100%
}

* {
    box-sizing: border-box;
}

.innerG {
    background-image: url('http://lorempixel.com/image_output/animals-q-c-1900-850-2.jpg');
    height: 100%;
}

.gallery-cell {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: 24px;
    background: #EEE;
    margin-right: 10px;
}

HTML代码是

<div class="gallery js-flickity" data-flickity-options='{"setGallerySize": false,"cellAlign": "center","imagesLoaded": true,"lazyLoad": 1, "freeScroll": false,  "wrapAround": true,"autoPlay": 6000,"prevNextButtons": true,"contain" : true,"percentPosition": true,"pageDots": true,"selectedAttraction" : 0.1,"friction": 0.6,"rightToLeft": false,"draggable": true}'
 >
  <div class="gallery-cell">
    <div class="innerG">

      <img src="http://lorempixel.com/image_output/animals-q-c-1900-850-2.jpg" />

      asdasdasd
    </div>
  </div>
  <div class="gallery-cell">Lorem ipsum dolor sit</div>
</div>

它只是调用 flickity - http://flickity.metafizzy.co/

从这个网址 - http://flickity.metafizzy.co/flickity.pkgd.js

这是填充或边距导致这种情况吗？

4

0 回答 0