基于窗口大小和容器最大宽度的动态填充

Question

我有一个container类，具有以下样式：

.container {
   width: 90%;
   max-width: 1400px;
   margin: 0 auto;
}

我还有一个自定义轮播，其中包含以下CSS：

.carousel {
   display: flex;
   padding-left: 5vw;
}

现在，我想要的是container中的内容，而carousel中的内容应该从同一位置的左侧开始。 padding-left:5vw可以正常工作，直到屏幕尺寸超过1400px。

而且我不能将carousel放在container内，因为carousel应该具有完整的屏幕宽度。

现在我需要帮助来计算padding-left，以便它可以与width: 90%和max-width: 1400px一起使用

Answer 1

Yiu可以使用媒体查询，并且当屏幕宽度达到1400时可以执行类似的操作

@media (max-width:1400px){
.carousel{
 padding-left: calc((100% - 1400px) / 2)
}
}