CSS 负边距定位

发布于 2024-08-28 21:02:35 字数 456 浏览 1 评论 0原文

使用负边距进行定位可以吗?我当前的网站中有很多内容,感觉这不是一种稳定的定位方式。我通常也建议使用它们。

例如,我有一个结帐页面,其中三个 div 彼此叠置

<div class="A">
   header
</div>
<div class="B">
   content
</div>
<div class="C">
   footer
</div>

(A、B 和 C),这意味着它们彼此叠置,以显示为附加状态。我这样做是使用:

.B
{
    margin-top: -20px;
}

在 div B 上,以满足 div A 的底部。

这是好的做法还是我应该使用 topleft 重新编码?

Is it ok to use negative margins for positioning? I have a lot in my current site and feel like it's not such a stable way to position things. I usually suggest to use them too.

For example I have a checkout page with three divs on top of each other

<div class="A">
   header
</div>
<div class="B">
   content
</div>
<div class="C">
   footer
</div>

(A, B and C), which are meant to sit on top of each other, to appear attached. I did this using:

.B
{
    margin-top: -20px;
}

On div B, to meet the bottom of div A.

Is this good practice or shall I re-code using top and left?

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

橪书 2024-09-04 21:02:35

如果您的 div 之间有一些边距,则可能您没有重置边距和填充(请参阅: http://meyerweb.com/eric/tools/css/reset/)。

一般来说,使用负边距并不是一件坏事,无论如何,如果你被迫在几乎所有地方设置它们,你可能应该重构你的 CSS,因为不同浏览器的结果可能略有不同,这可能会导致一个大麻烦:) 。

If your divs have some margin between each other probably you didn't reset your margins and padding (see: http://meyerweb.com/eric/tools/css/reset/).

Generally speaking is not a bad thing to use negative margins, anyway if you are forced to set them almost everywhere probably you should refactor your css, because the result can be slightly different among the various browsers and this could lead to a big headache :) .

缘字诀 2024-09-04 21:02:35

众所周知,负边距会在 IE7 及更低版本中导致内容被截断的问题。而且,正如别名所暗示的那样,它也可能表明设计的其余部分存在问题。但我认为,说负利润在所有情况下都是“糟糕的发展”是错误的。但一如既往,测试测试测试。

Negative margins have been known to cause problems in IE7 and below with content being cut off. And, as alias suggests, it could also indicate a problem with the rest of the design. But I think it is wrong to say that negative margins are 'bad development' in all cases. But as always, test test test.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文