div 的顶部填充与其上方的 div 无关答案

【问题标题】：div's top-padding is not relative to the div above itdiv 的顶部填充与其上方的 div 无关
【发布时间】：2016-12-01 22:07:14
【问题描述】：

我不太擅长 HTML/CSS。 Here 是我正在尝试编辑的网站。我不确定这是否应该在 WordPress 堆栈中，因为即使我的网站在 WordPress 中，问题出在 CSS 上。另外，我真的很抱歉英语不好（我知道 5 种语言，所以有点难以跟上）。问题是网格（显示产品目录的基本网格）及其上方的容器都是一个 div 的子级。当我尝试更改网格的填充时，它会更改相对于父 div 顶部的填充，而不是其顶部的兄弟。我不确定哪些 CSS 属性可能会影响这一点（我不太擅长 CSS），但我已经发布了我认为可能是问题的那些。请访问链接并检查元素（对不起..）

.child-on-top{
//acutal id on page is featured-111
width: 99.8936px;
height: 449px;
background-size: 100% 100%;
}
.child-below{
position: relative;
padding-top: 100px;
}
.parent{
//actual id is wrapper.
position: relative;
clear: both;
}

到目前为止，一个有效的解决方案是，如果我将顶部填充增加到大约 500 像素，这将在下面的子元素上方添加大约 50 像素的填充。但这仅适用于桌面。在移动设备中，您将获得大量空白空间。所以这不是一个真正的解决方案。

【问题讨论】：

标签： html css wordpress padding

【解决方案1】：

添加以下 css 然后检查。您的 div 的 id 为 featured-111，它从 grid 类中浮动，并且由于这个问题而创建。所以写这个css

#featured-111{
float:none;
}

【讨论】：

@showdev 检查他们的网站。他们是 div 的#fetured id，它的类网格有 float:left 因为这个当他们给填充时，它是从父级而不是兄弟级获取的，
噢！非常感谢@ankit。那解决了！！你能解释一下它是怎么发生的吗？
welcome..@StoryMode.. 正如我提到的，您的特色-111 div 从网格类中浮动，这就是为什么它的下一个 div 覆盖您的上层 div，这就是它从包装器中获取填充的原因。
你也可以尝试用这个来清除浮动，就像 .child-below{clear:left} 一样。