1回答

好帮手慕小李

2024-02-07

同学你好，解答如下：

按照老师设计的布局来说center-wrap本身就需要定位，另左右箭头与列表是一体的。所以左右箭头需要定位到center-wrap，布局分析图如下：

这么做的好处是，因为左右箭头会始终跟随center-wrap来定位所以我们就不用考虑用户屏幕大小的问题，如将左右箭头

脱离center-wrap它转而按照banner来定定位的话那么当遇到屏幕较小的用户时箭头位置可能会于列表叠加或者出现我们不想看到的情况如下：

将箭头right按照banner来定位的话如下：

.banner a#right_btn {

    position: absolute;

    width: 28px;

    height: 44px;

    background: url(../images/icons.png) no-repeat -21px -29px;

    top: 50%;

    right: 600px;

    margin-top: -22px;

}

html如下：

最终结果看似没问题。

在屏幕尺寸OK的情况下是这样的，但我们缩小屏幕后会出现如下的问题：

那么也就是说这样额定位距离与参照物并不合理如下：

下面是按照center-warp定位在小屏幕下的表现如下：

另同学可以发现banner的宽度是100%自适应的也就是说屏幕有多宽它就有多宽（不可控）但是center-warp的宽度是固定的，所以它是可控的。这样更能保证不论屏幕大小它都是ok的。

祝学习愉快！

0