css - 设置左侧（在容器中）对齐的轮播以到达屏幕右侧（在容器外）

Question

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

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

这就是我目前所拥有的

这就是我要的

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

score 1 · Accepted Answer

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

容器正在使用防止水平溢出overflow-x: hidden。无论问题来自何处，您都需要确保容器允许水平溢出。
overflow-x: hidden由于和，轮播不允许水平溢出width: 100%。您可以将水平溢出更改为overflow-x: visible或将宽度更改为width: auto; min-width: 100%;。

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

1 回答 1