我有一个 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
你可以使用媒体查询,当屏幕宽度达到1400时,做一些类似的事情。
@media (max-width:1400px){
.carousel{
padding-left: calc((100% - 1400px) / 2)
}
}