内部叠加图像<div>导致文本向下移动

Question

我有一个带有border:15px的<div>。它的左角有一张图片，如小提琴中所示

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

现在，这张图片正在从顶部向下推文本。如何使文本获得margin-top:0;

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

有什么解决方案吗？

Answer 1

只需在图像上使用float: left;，请参阅更新的Fiddle。你也可以在它上面使用一个否定的margin-right来防止它将文本向左推，但你需要弄乱它的z-index和其他内容，这意味着为了样式设置目的，需要额外的HTML标记；看看这个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值，这意味着需要为文本添加一个新元素。有关此示例，请参见此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中查看