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

您应该使用display：inline-block。之后，您应该给文本块一定宽度，其中不大于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 2

您可以将两个div的显示更改为table-cell

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

<强> jsFiddle example

Answer 3

你可以使用清除和花车，我已经更新了你的fiddle

我已将此添加到您的代码中：

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

Answer 4

好的，你可以试试这个

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

您可以在jsfiddle

中看到它

Answer 5

我在这里做了两件事

1）放浮球：左;这里

.comments .comment .profile-picture {
  vertical-align: middle;
  display: inline-block;
     float:left;

}

2）更改显示：内联显示：阻止;

.comments .comment .text-block {
  display: block;
}

它会正常工作：）

Answer 6

JSFIDDLE here

编辑CSS看起来像这样。我只是浮动图像左，然后添加一些填充。您甚至不需要显示内联文本。然后清楚：两个;当时。

.comments {
    padding: 10px;
}

.comments .comment {
    margin-bottom: 10px;
}

comments .comment .profile-picture {
    float:left;
    padding-right: 10px;
}

.timeago {
    color: rgba(0, 0, 0, 0.5);
    clear: both;
}

文字低于图片

6 个答案: