0

我在 Nuxt/Vue 应用程序的容器中有一个 flickity-carousel(用于居中/对齐目的)。我希望轮播与左侧的其余内容对齐,但我希望轮播一直到屏幕的右边框。我正在使用 Tailwind 进行造型。

<div class="container mx-auto mx-10">
  <Content_A />
  <content_B />
  <Carousel class="???"/>
</div>

这就是我目前所拥有的

在此处输入图像描述

这就是我要的

在此处输入图像描述

在玩了overflow-x-visible其他顺风课程之后,我还没有成功。如果有人知道该怎么做,请帮助我!

4

1 回答 1

1

看起来可能有几个原因导致这对您不起作用。

  1. 容器正在使用 防止水平溢出overflow-x: hidden。无论问题来自何处,您都需要确保容器允许水平溢出。

  2. overflow-x: hidden由于和,轮播不允许水平溢出width: 100%。您可以将水平溢出更改为overflow-x: visible或将宽度更改为width: auto; min-width: 100%;

检查 Carousel 中每个 div 的样式也是值得的,因为如果顶级Carousel组件和 Carousel 项本身之间存在几个元素,则问题可能来自 Carousel 中的一个或多个位置。

于 2021-10-25T20:23:40.587 回答