替代负边际

Question

我正在寻找使用负边距的替代方法，因为我知道他们并没有被认为是很酷的＃34;并且他们被认为是hacky。

我在WordPress中开始一个新网站，我需要在每个页面添加两个图像。必须链接图像，并且每个页面上的链接必须不同，因此我无法将图像添加到菜单或小部件中。

当我将它们添加到页面内容时，它们显示在标题下方，但我需要在标题内。我这样定位他们：

.enflag{
  position:absolute;
  top:0;
  right:0;
}

.zhflag{
  position:absolute;
  top:1%;
  right:1%;
}

然后我在开发工具中添加了一个负边距顶部，它们显示在我需要它们的标题内，但我想知道是否有替代使用负边距。

此图片显示了我正在做的事情。英国国旗的边距为负，但中国国旗显示在标题下方，因为它只有定位，将其放在同一个div中，而不是在页面顶部。

Working Sample

Answer 1

如果使用得当，负边距没有错误。所有关于使用正确的工具来完成工作。在这种情况下，你做错了。

首先，如果定位多个元素说你的标志在右上方你想要能够轻松地添加/删除它们而不添加CSS，那么将它们包装在一个绝对定位的容器中，而不是在其上放置每个标志＆＃ 39;如果合适的话，自己的OR将容器向右浮动。

HTML

<div class="flag-container">
    <img class="alignright size-full wp-image-19 zhflag" src="http://rmbpay.com.au/tmp/wp-content/uploads/2016/11/Zh-Flag-s.png" alt="Chinese Language Button" width="50" height="35">
    <a href="http://rmbpay.com.au/tmp/"><img class="alignright size-full wp-image-18 enflag" src="http://rmbpay.com.au/tmp/wp-content/uploads/2016/11/british-flag-s.png" alt="English Language Button" width="50" height="35"></a>
</div>

CSS：

.flag-container{
    position: absolute;
    right: 0; 
    top: -65px;
}

并删除.zhflag和.enflag的所有规则，因为现在不需要它们。

将旗帜容器移动到容器中可能会更好，因为导航器的位置相对较远且100％宽，因此可以更好地分组事物并避免分层问题，特别是在旧浏览器中。