当我之前有一个img标签时，跨度下降

Question

我正在为我自己工作的网站制作模板...我添加了一个评论图标和一个范围来声明帖子上有多少评论。它只是我想要它的模板，它并没有真正起作用。

问题是图标和跨度（带注释）向下跳了一行并取代了自己的帖子有一个图像：

这是我每个街区都有的课程;

没有图片：

<a href="posts/post1.php" class="postlink">
  <div class="post">
    <img src="img\userprofile.png" alt="img\userprofile.png" width="100px" height="100px">
    <p class="context">Random Text</p>
    <i class="fa fa-comment-o"></i><span class="comment">  300</span>
  </div>
</a>
<a href="posts/post2.php" class="postlink">
  <div class="post">
    <img src="img\userprofile.png" alt="img\userprofile.png" width="100px" height="100px">
    <img src="img/baugette.jpg" width="220" height="150" class="postimg">
    <p class="context">Random Text</p>
    <i class="fa fa-comment-o"></i><span class="comment">  500</span><br>
  </div>

带图片：

<a href="posts/post1.php" class="postlink">
  <div class="post">
    <img src="img\userprofile.png" alt="img\userprofile.png" width="100px" height="100px">
    <p class="context">Random Text</p>
    <i class="fa fa-comment-o"></i><span class="comment">  300</span>
  </div>
</a>
<a href="posts/post2.php" class="postlink">
  <div class="post">
    <img src="img\userprofile.png" alt="img\userprofile.png" width="100px" height="100px">
    <img src="img/baugette.jpg" width="220" height="150" class="postimg">
    <p class="context">Random Text</p>
    <i class="fa fa-comment-o"></i><span class="comment">  500</span><br>
  </div>

这是该图片的唯一CSS代码：

img.postimg {
    margin-top: -100px;
}

Answer 1

将图片和文字换成单独的div，如下所示

<a href="posts/post1.php" class="postlink">
  <div class="post">
    <div class="image">
        <img src="img\userprofile.png" alt="img\userprofile.png" width="100px" height="100px">
    </div>
    <div class="text">
        <p class="context">Random Text</p>
        <i class="fa fa-comment-o"></i><span class="comment">  300</span>
    </div>
  </div>
</a>

然后在css中为这些元素指定宽度。

.image{
    width:50%;
}
.text{
    width:50%;
}

尝试更改width values并尝试添加float:left或float:right