Question

我的网页顶部有一个徽标图片。徽标本身仅占左手边的三分之一左右。这个酒吧的右边三分之二是浅蓝色和深蓝色。我有几个链接，用户名显示在右侧，并希望浮动图像。

最初，我的图像占据了酒吧（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

我对你想要完成的事情感到有些困惑。

如果你正在使用float，那么请确保你为每个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>

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

3 个答案: