问题描述
这是CSS:
.product__list__item {
width: 100%;
display: grid;
grid-template-rows: repeat(2,1fr);
background: #FFFFFF;
-webkit-Box-shadow: 0px 4px 40px rgba(0,0.11);
Box-shadow: 0px 4px 40px rgba(0,0.11);
transition: Box-shadow .3s;
}
.product__list__item:hover .product__list__item__img img{
transform: scale(1.1)
}
.product__list__item__img {
position: relative;
height: 100% !important;
justify-content: flex-start;
overflow: hidden;
}
.product__list__item__img-slide img {
width: 100%;
max-width: 100%;
height: 200px;
}
和HTML:
<div class="product__list__item">
<div class="product__list__item__img owl-carousel owl-theme">
<div class="product__list__item__img-slide">
<img src="img/product1.png" alt="">
</div>
<div class="product__list__item__img-slide">
<img src="img/product1.png" alt="">
</div>
<div class="product__list__item__img-slide">
<img src="img/product1.png" alt="">
</div>
</div>
<div class="product__list__item__info">
<a href="#" class="product__list__item__fav"></a>
<p class="product__list__item__info__1">ЦАО <i class="product__list__item__status"></i> <span>м. Пушкинская</span></p>
<p class="product__list__item__info__2">Спиридоновка ул.,д.12</p>
<p class="product__list__item__info__3">105,0 м²</p>
<p class="product__list__item__info__4">Арендатор: <span>Хлеб Насущный</span></p>
<p class="product__list__item__info__5">Продан</p>
</div>
</div>
还有一些JS
$('.product__list__item__slider').owlCarousel({
loop: true,dots: true,nav: false,items: 1
});
但是我在Safari中获得的内容(宽度:100%,固定宽度如width:300px滑块)在Chrome中看起来像,但是我需要 具有100%的响应值)—
我正在使用正常主题类的owl carousel-“ ... owl-carousel owl-theme”,也许有人过去解决了这个问题,或者对如何解决有一些想法,请帮助我解决请问这个问题。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)