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

我有两个坐在彼此下面的兄弟div，它们都包含在同一个父div中。具有标记约束的CSS定位（边距/填充）

要求是divs之间需要一定的空间，比如说20px，但是内部div和父div之间的空间需要在所有面上都是相同的（top，right，bottom，left ），在这种情况下是0px。

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

在跨浏览器兼容的方式下，用CSS（无javascript）解决这个问题的好方法是什么？

谢谢！

2010-08-13 Jaap

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

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

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

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

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

来源

2010-08-13 13:42:37 igor

注意：第一个孩子伪类和相邻选择器在IE6上不工作 – 2010-08-13 13:46:20

感谢易江指出了这一点。我想没有纯粹的CSS解决方案来解决这个问题的IE6，而不诉诸额外的标记。 – igor 2010-08-13 13:49:27

不幸的是，它需要工作在IE6以及 – Jaap 2010-08-13 13:51:46

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

来源

2010-08-13 13:45:04 pootzko

正如其他人已经指出的那样，您不能使用纯CSS的方法，这将在IE6中起作用。但是，为什么不使用精缩，基本jQuery框架 - 没有用户界面将是微小的 - 然后你可以调用的第一个孩子，并申请保证金到：

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

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

希望这可以帮助某个地方的人。

来源

2010-08-13 14:07:41 SimonDowdles

两个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。

如果它们是并排的并且浮动是不同的故事，则左侧的边距不会与边缘顶部相同。你可能可以在两个div上使用margin-right，但是修改父级的宽度并将overflow设置为hidden以便切断扩展边界 - 但我不确定这种事情的兼容性。

你确定你没有办法区分两个div吗？找到解决这个问题的方法可能会帮助你很多。

来源

2010-08-13 14:09:30 Andrew

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

回答

相关问题