1

我有<div>一个border:15px。它在小提琴中给出的左角有一个图像

http://jsfiddle.net/user1212/e7Gez/17/

现在，此图像正在从顶部向下推文本。我怎样才能让文字得到margin-top:0;

我不想使用图像，background-image因为它15px border与它重叠。

有什么解决办法吗？

4

3 回答 3

2

只需float: left;在您的图像上使用，请参阅更新的 Fiddle。您也可以margin-right在其上使用负号以防止其将文本推向左侧，但随后您需要将z-index其和其余内容弄乱，这意味着需要额外的 HTML 标记以用于样式目的；看到这个小提琴。

于 2012-09-20T17:55:34.373 回答
0

好的，我将把我的另一个答案作为一个更直接的“这就是你如何按照自己的方式解决问题”的答案，但我认为这里更好的方法是使用position: absolute;- 这样可以更轻松地实现效果.

小提琴

我将图像样式设置如下：

img#post-backgrnd {
    position: absolute;
    top: -1px;
    left: 0px;
}

这会强制图像移动到左上角，这就是我们想要的位置（这top: -1px;是因为图像与边框略微未对齐），并且position: absolute;意味着它不占用空间，因此它不会推动文本一点也不。但是，这样做时，图像会覆盖文本。这里更好的解决方案是编辑图像，修复对齐问题（并转到top: 0;），并使白色部分实际上是透明的。

如果由于某种原因无法完成，您可以使用 解决此重叠问题z-index，但这意味着您的父级、您的图像和文本需要三个不同的z-index值，这意味着您需要一个新的文本元素。有关此示例，请参阅此 Fiddle。

于 2012-09-20T18:36:48.503 回答
-1

只需添加vertical-align:top到您的<div>喜欢：

.content {
  width: 500px;
  height: 500px;
  border: 15px solid #E4EAF3;
  /*  background: #ffffff url('http://smitra.net76.net/post-bg.jpg') no-repeat top left;*/
  margin-top:0;
  padding-top:0;
  vertical-align:top;
}

在jsfiddle中看到它

于 2012-09-20T17:57:12.677 回答