文字在图片下面

Question

我正在创建一个评论的布局。然而，文字在图像下面，我似乎无法摆脱它。

下面是一个演示这个问题的JSFiddle。

​

.comments {
  padding: 10px;
}
.comments .comment {
  margin-bottom: 10px;
}
.comments .comment .profile-picture {
  vertical-align: middle;
  display: inline-block;
}
.comments .comment .text-block {
  display: inline;
}
.timeago {
  color: rgba(0, 0, 0, 0.5);
}

<div class="comments">

	<div class="comment">

		<div class="profile-picture">
			<img src="http://fakeimg.pl/50x50/" />
		</div>

		<div class="text-block">
			<a href="#">
				Barack Obama
			</a>

			Change will not come if we wait for some other person or some other time. We are the ones we've been waiting for. We are the change that we seek.

			<br />

			<div class="timeago">20 hours ago</div>

		</div>

		<hr />

		<div class="clear"></div>

	</div>

	<div class="clear"></div>
</div>

​

我如何才能让文字不去下面的图像？

Answer 1

可以将两个div的显示更改为表单元格。

.comments .comment .profile-picture, .comments .comment .text-block{
    display:table-cell
}

jsFiddle实例

Answer 2

您应该使用display:内联块。在此之后，您应该给文本块一个不大于100%图像宽度(加边距)的特定宽度。

.comments .comment .profile-picture {
  vertical-align: middle;
  display: inline-block;
}
.comments .comment .text-block {
  display: inline-block;
  vertical-align: middle;
   width: calc(100% - 60px);
}

Answer 3

你可以用清空和浮动来做，我已经更新了你的小提琴

我在您的代码中添加了以下内容：

.comments .comment .profile-picture {
  clear: both;
  float: left;
  margin-right: 10px;
}
.comments .comment .text-block {
  clear: both;
}