如何将控件浮动在图像顶部（使用图像背景）

Question

我的网站页面的整个顶部都有一个徽标图像。徽标本身仅占左侧约三分之一。该条的右侧三分之二是普通的深蓝色。我有几个链接和用户名显示在右侧，并且希望将它们浮动在图像上。

最初，我的图像占据了栏 (div) 左侧的三分之二，还有一个单独的 div，链接位于右侧。问题是该方法在两个 div 之间留下了明显的边界线，即使它们具有相同的颜色。

透明度会有帮助吗？我该如何设置？

    _________________________________________________________________
    |  LOGO HERE                              User: David Troy      |
    |  LOGO HERE                          Home | FAQ | Contact Us   |
    |_______________________________________________________________| 

Answer 1

关于“细线空间”：如果您使用 Internet Explorer，则必须省略 div 之间的空格，如下所示：

<div class="left">Logo</div><div class="right">Links</div>

我相信这是由于 Quirks 模式造成的；它在 XHTML 严格模式下按预期显示。

然后，CSS 看起来像这样：

div.left {
  float : left;
}
div.left, div.right {
  margin : 0px;
  padding : 0px;
}

Answer 2

尝试：

div.left, div.right {
  margin : 0px;
  padding : 0px;
}

假设您的左侧 div 有一个 class="left" ，右侧 div 有一个 class="right"

这将消除 div 之间的间距。

Answer 3

我对你想要实现的目标有点困惑。

如果您使用浮动，请确保为每个 div 指定宽度。

如果您只想将文本显示在图像上方，那么两个简单的 div 块就可以了。

<div>
Your links here
</div>
<div>
<img src="yourimg.gif" />
</div>

如果你想让它们并排，这应该可行：

<div style="float: left; width: 400px">
<img src="yourimg.gif" />
</div>
<div style="float: left; width: 400px">
Link 1
Username
</div>