问题描述
我在容器内使用光滑的滑块。容器有两列,分别是 col-1 和 col-2。 我希望它并排,因为我使用了 flex 但它不起作用。任何人都可以帮我解决这个问题。我的目标是实现这样一个滑块,其中推荐文本部分是固定的,只有右一滚动。问题是,当使用 flex 时,推荐滑块框作为单独的行下降
$(".testimonial-slider-wrap").slick({
dots: true,arrows: true,slidesToShow: 1,slidesToScroll: 1,variableWidth: true,speed: 300,})
.testimonial-main-wrap {
max-width: 136rem;
margin-left: auto;
}
.testimonial-main-wrap {
display: flex;
flex-wrap: wrap;
}
.testimonial-col-1 {
max-width: 39.5rem;
margin-right: 4.2rem;
}
<section id="testimonial">
<div class="testimonial-main-wrap">
<div class="testimonial-col-1">
<p>What Zaiyna clients say</p>
</div>
<div class="testimonial-col-2">
<div class="testimonial-slider-wrap">
<div class="testimonial-slides">
</div>
</div>
</div>
</div>
</section>
解决方法
我不完全明白您想要存档的内容,但尝试将 width:50%
放在 col-1
和 col-2
中。这样两个元素就可以共享屏幕中的同一行。