padding-left 有效但 padding-right 无效

Question

我有一个滚动时间线 (demo)，我遇到了一个问题，即 padding-left 在滚动之前隐藏时间线左侧的时间线分支图像，但是 padding-right 无法隐藏右侧的分支图像。

我尝试使用的方法是分支图像位于容器 .event_line 内，容器 overflow: hidden 并且图像 padding-left 设置为 100% 直到部分滚动到 padding-left 时动画下降到 0%，显示图像。此方法在时间线左侧有效，在右侧无效

我需要更改什么才能padding-right隐藏时间轴右侧的分支图像？

Answer 1

只需将 float:right; 添加到您的右图即可。

或

将此 CSS 添加到您的 CSS 文件中

.right .timeline-item .event_line img
{
float:right;
}

Answer 2

因为overflow:hidden把右边多余的部分剪掉了。由于时间轴右边有padding在右边，所以padding被截掉了，而不是内容。

尝试在时间轴右侧从 -100% 到 0 设置动画 margin-left 而不是设置 padding-right 的动画。 Here's the fiddle.

padding-left is working but padding-right is not