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

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

我正在尝试如下所示的@media查询；

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

但是，它需要针对所有屏幕尺寸进行设置，并且无法按我预期的方式工作。

最佳答案

@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;*/
}}

您甚至可以添加！important这样的

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

强制它仅出于调试目的而覆盖。如果“重要”有效，则意味着应该有一些其他CSS正在更改填充。