Question

我有<div> border:15px。它在左下角有一个图像，如小提琴中所示。

现在，此图片正在从顶部向下推文字。如何让文字获得margin-top:0;

我不想将图片用作background-image，因为15px border与其重叠。

任何解决方案？

Answer 1

在图片上使用float: left;，请参阅updated Fiddle。您还可以在其上使用否定margin-right以防止它将文本推向左侧，但是您需要弄乱它的z-index和其他内容，这意味着其他HTML用于造型目的的标记;见this Fiddle。

Answer 2

好的，我将把我的另一个答案更直接地说“这是你按照自己的方式解决问题”的答案，但我认为这里更好的方法是使用position: absolute; - 这样可以大大减少效果。

Fiddle

我按照以下方式设置图像样式：

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

这会强制图像转到我们想要的左上角（top: -1px;是因为图像与边框稍有不对齐），而position: absolute;表示它确实不占用空间，所以根本不推文。但是，这样做，图像掩盖了文本。这里更好的解决方案是编辑图像，修复对齐问题（并转到top: 0;），并使白色部分实际上透明。

如果由于某些原因无法完成，您可以使用z-index修复此重叠问题，但这意味着您的父级，图片和文字需要三个不同的z-index值，表示您需要为文本添加新元素。有关此示例，请参阅this Fiddle。

Answer 3

只需将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

中查看

在<div>中叠加图像，导致文本向下移动</div>

3 个答案: