CSS3-如何设置所有屏幕尺寸相同的两个区域之间的距离

Question

我有广告（左侧 - 横幅）和内容部分。随着屏幕尺寸的增加，这两个区域之间的距离也在增加。我该如何解决这个问题？如何设置所有屏幕尺寸相同的两个区域之间的距离？

我正在尝试下面的@media查询;

@media only screen and (max-width:1024px) { 
.leftbanner {
 padding-left: 15px;
}} 
@media only screen and (max-width:1366px) { 
.leftbanner {
 padding-left: 85px;
}}

但它需要设置所有屏幕尺寸而不是按照我的预期工作..有没有更简单的方法来做我说的？

Answer 1

@cervantes基本上我认为除了你在问题中粘贴的内容之外还有一些CSS会导致填充因屏幕大小而异。

您可以尝试按照之前的建议覆盖媒体查询之外的填充，看看是否属实。

像这样的东西：

.leftbanner {
 padding-left: 15px;
}
@media only screen and (max-width:1024px) { 
.leftbanner {
 /*padding-left: 15px;*/
}} 
@media only screen and (max-width:1366px) { 
.leftbanner {
 /*padding-left: 85px;*/
}}

你甚至可以像这样添加！重要

 .leftbanner {
     padding-left: 15px !important;
 }

强制它只是为了调试而覆盖。如果“重要”有效，则意味着应该有一些其他CSS正在改变你的填充。

Answer 2

只需在所有媒体查询之外（即上方或下方）定义该设置，并将其从媒体查询中删除。

Answer 3

嗯，你的意思是相对于视口的位置？你需要忘记媒体查询，然后只使用视口单元。就像是

.leftbanner{padding-left: 5vw;}