Question

我有两个兄弟div在彼此下面，两个都包含在同一个父div中。

要求是div之间需要一定的空间，比方说20px，但内部div和父div之间的空间需要在所有方面相同（顶部，右侧，底部，左侧），在这种情况下为0px。

这里的约束是内部div需要具有完全相同的标记，因此我不能将其他类或其他类应用于其中一个。此外，我不能在子div之间添加任何标记，也不能在其中一个子div之上或之下添加任何标记。

以跨浏览器兼容的方式使用CSS（无javascript）解决此问题的好方法是什么？

谢谢！

Answer 1

#parentdiv div {
    margin-top: 20px;
}

#parentdiv div:first-child {
    margin-top: 0;
}

应该这样做。或者，您可以尝试

#parentdiv div + div {
    margin-top: 20px;
}

使用哪种解决方案取决于浏览器对:first-child伪类或+相邻选择器的支持。任何现代浏览器（因此，折扣IE6）都应该支持两者。

Answer 2

你可以在它们之间插入另一个div并使其高度为20px吗？或者将第一个内部div放入一个新的div中，然后将新的div底部边距20px作为可接受的解决方案？

Answer 3

正如其他人已经说过的那样，你不能使用适用于IE6的纯CSS方法。但是，为什么不使用缩小的，基本的jQuery框架 - 没有ui它会很小 - 然后你可以调用第一个孩子并将边距应用于：

$("#parentdiv:first").css({ marginTop: 0 })

这样你已经应用了margin-top：20px;在你的CSS中，现在你只从第一个孩子那里删除它。我知道你说你不想要一个javascript方法，但你没有多少选择，除非你愿意重新设计ie6并为我们复活他？

希望这可以帮助某个人。

Answer 4

两个div坐在彼此下面？你的意思是他们是垂直堆叠，一个在另一个上面？只要你没有在父div上填充，Margin-top就会这样做。

试试这个例子。

<html>
<head>
<style>
div.parent {
    background-color: #AAA;
}
div.child {
    background-color: #CCC;
    margin-top: 20px;
}
</style>
</head>
<body>
<div class="parent">
    <div class="child">&nbsp;</div>
    <div class="child">&nbsp;</div>
</div>
</body>
</html>

你会注意到，只要第一个孩子上方的父母内部没有任何内容，其边距就不会延伸父母div。

如果它们是并排浮动而这是一个不同的故事，则margin-left与margin-top的工作方式不同。您可以在两个div上使用margin-right但是修复父级的宽度并将overflow设置为hidden以便切断扩展的边距 - 但是我不确定这种事情的兼容性。

你绝对肯定你没有办法区分这两个div吗？找到解决这个约束的方法可能会对你有所帮助。

带有标记约束的CSS定位（边距/填充）

4 个答案: