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

问题描述 投票:0回答:1

我有一个 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

css
1个回答
0
投票

你可以使用媒体查询,当屏幕宽度达到1400时,做一些类似的事情。

@media (max-width:1400px){
.carousel{
 padding-left: calc((100% - 1400px) / 2)
}
}
© www.soinside.com 2019 - 2024. All rights reserved.