当前位置：文江博客话题详情

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

发布于 2024-09-14 05:23:11 字数 287 浏览 5 评论 0原文

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

要求是div之间需要一定的空间，比如说20px，但是内部div和父div之间的空间需要在所有边（上，右，下，左）相同，在这个案例 0 像素。

这里的限制是内部 div 需要具有完全相同的标记，因此我不能仅将不同或附加的类应用于其中之一。另外，我无法在子 div 之间添加任何标记，也无法仅在子 div 之一的上方或下方添加任何标记。

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

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吻泪 2024-09-21 05:23:11

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

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

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

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

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

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

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

should do it. Alternatively, you could try

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

Which solution to use depends on browers’ support of either the :first-child pseudo-class, or the + adjacent selector. Any modern browser (thus, discounting IE6) should support both.

回复收藏 0 原文

迷途知返 2024-09-21 05:23:11

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

回复收藏 0 原文

枫林﹌晚霞¤ 2024-09-21 05:23:11

正如其他人已经指出的，您不能使用在 IE6 中工作的纯 CSS 方法。然而，为什么不使用一个缩小的、基本的 jQuery 框架 - 没有 ui 它会很小 - 然后你可以调用第一个子元素并对其应用边距：

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

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

希望这对某个地方的人有帮助。

As others have already stated, you cannot use a pure CSS approach that will work in IE6. However, why not use a minified, basic jQuery framework - without the ui it will be tiny - and then you can call the first child and apply the margin to that:

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

That way you'd have already applied the margin-top:20px; in your css, now you're removing it from the first child only. I know you said you did not want a javascript approach, but you're not left with much choice, unless you're willing to re-engineer ie6 and resurrect him for us?

Hope this helps someone somewhere.

回复收藏 0 原文

仅此而已 2024-09-21 05:23:11

两个 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"> </div>
    <div class="child"> </div>
</div>
</body>
</html>

您会注意到，只要第一个子级上方的父级内部没有任何内容，其边距就不会扩展父级 div。

如果它们并排且浮动，那就是另一回事了，margin-left 与 margin-top 的工作方式不同。您也许可以在两个 div 上使用 margin-right，但修复父级的宽度并将溢出设置为隐藏，以便切断扩展的边距 - 但我不确定此类事情的兼容性。

你绝对确定你没有办法区分这两个 div 吗？找到解决该限制的方法可能会对您有很大帮助。

Two divs sitting below each other? Do you mean they're stacked vertically, one on top of the other? Margin-top would do it as long as you don't have padding on the parent div.

Try this example.

<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"> </div>
    <div class="child"> </div>
</div>
</body>
</html>

You'll notice that as long as there's nothing inside the parent above the first child its margins won't extend the parent div.

If they're side-by-side and floating that's a different story, margin-left doesn't work the same as margin-top. You might be able to use margin-right on both divs but fix the width of the parent and set overflow to hidden in order to chop off the extended margin - but I'm not sure about compatibility on that kind of thing.

Are you absolutely certain you've got no way to distinguish the two divs? Finding a way around that constraint might do a lot to help you.

回复收藏 0 原文

~没有更多了~