猫头鹰旋转木马 - 宽度计算错误

Question

我有三个响应项(imgs),但每次加载Owl-Carousel时,owl-wrapper宽度是所有图像大小的两倍.例如; 如果图像全尺寸需要1583像素,猫头鹰包装需要1583*3*2 = 9498px,所有网站都采用这个宽度,而不是全尺寸(1583像素).

问题:http: //nacionalempreendimen.web2144.uni5.net

HTML

<div id="promoted-carousel">
    <div class="item"><img src="assets/img/tmp/1.jpg"></div>
    <div class="item"><img src="assets/img/tmp/2.jpg"></div>
    <div class="item"><img src="assets/img/tmp/3.jpg"></div>
</div>

CSS

#promoted-carousel .item img{
    display: block;
    width: 100%;
    height: auto;
}

JS

$('#promoted-carousel').owlCarousel({
    autoPlay: 5000,
    stopOnHover: true,
    singleItem: true
});

UPDATE

我看到当我把#promoted-carouseldiv放出.page-wrapperdiv时,它运行正常.但是我对css的了解还不足以理解它的工作原理.

Answer 1

此问题是一个已知问题。你需要放在table-layout: fixed桌子上。

https://github.com/OwlFonk/OwlCarousel/issues/274