垂直中心/改变计算高度反应光滑

Posted

技术标签:

【中文标题】垂直中心/改变计算高度反应光滑【英文标题】:Vertical center/change calculated height react-slick 【发布时间】:2019-09-05 15:28:33 【问题描述】:

我正在尝试找到一种垂直居中或以其他方式为我的 react-slick 滑块添加空间的方法,以便在幻灯片悬停时显示框阴影。目前似乎正在自动计算高度,slick-list 包装器具有计算出的幻灯片高度的内联样式。

我有什么方法可以覆盖或以其他方式绕过内联高度或 overflow:hidden on slick-list 被设置,以便我可以显示我的盒子阴影?

当前(框阴影变为红色以获得更好的可见性):

desired 会更接近这个,你可以看到阴影的底部。我通过在浏览器中手动编辑高度得到了这个:

【问题讨论】:

【参考方案1】:

我不确定我是否理解了这个问题,但是您不能为每张幻灯片添加一些填充吗?还可以尝试为 .slick-list 设置您想要的高度,让您的幻灯片具有 height: 100%;,然后它们都应该具有父级 (.slick-list) 的高度。

如果您想在父级中居中幻灯片,请将父级设为 display: flex; 并添加 align-content: center;

如果这不是您要查找的内容,请发布屏幕截图和您拥有的代码。

【讨论】:

添加了照片并更新了我的问题,希望更加清晰 我目前在项目中使用 react-slick 并为幻灯片设置固定高度会导致 .slick-slider 具有最长幻灯片的高度。如果没有,请尝试在幻灯片中添加一些 margin-bottom,它也应该可以解决问题。 margin-bottom 没有在幻灯片容器和幻灯片之间留出任何空间,但我在 .slick-track 上使用了相对位置,这有帮助,盒子阴影仍然略微被切断,但效果更好比以前

以上是关于垂直中心/改变计算高度反应光滑的主要内容,如果未能解决你的问题,请参考以下文章

光滑的网格标题行单元格对齐

具有动态宽度和高度的垂直和水平中心块

如何在反应中改变手风琴的高度?

如何在反应原生中改变 <​​FlatList/> 的高度?

打破容器时垂直对齐图像

UILabel改变高度,动画从中心展开