首页 文章

负边际的替代方案

提问于
浏览 次
1

我正在寻找使用负边距的替代方法，因为我知道它们不被认为是“酷”，而且它们被认为是hacky .

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

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

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

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

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

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

enter image description here

Working Sample

css wordpress

1 回答

  • 1

    如果使用得当，负边距没有错 . 这就是为工作使用正确的工具 . 在这种情况下，你做的有点不对劲 .

    首先，如果定位多个元素说你的标志在右上方，你希望能够轻松地添加/删除它们而不添加CSS，所以将它们包装在一个绝对定位的容器中，而不是将每个标志放在它自己的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％宽，以便更好地分组，避免分层问题，特别是在旧浏览器中 .

    回复于

相关问题