我有图片，标题，文本，日期和来源。 我想将图像放在左边，把来源和日期放在底部。如果文本太多，它们将进入图像下方，这很好。但如果太少了。我希望日期和来源像这样放在图像旁边的底部：
-------------------------------
|########### heading 1|
|########### text text text text|
|########### text text text text|
|########### |
|########### |
|########### source date|
--------------------------------
或者这个：
-------------------------------
|########### heading 1|
|########### text text text text|
|########### text text text text|
|########### text text text text|
|########### text text text text|
|########### text text text text|
| text text text text text text |
| source date|
--------------------------------
一切正常，除了我无法将来源和日期转到底部。我已经尝试了很多解决方案，但到目前为止都没有奏效。
这是我的小提琴：
有几种方法可以实现此布局，这只是我认为可能对您有所帮助的一种快速解决方案(您可以探索 Grid 和/或 Flexbox 以获取其他布局解决方案(。这是您提供的内容的精简版本，但您应该能够轻松地将任何缺失的内容插入到标记中。
在大多数情况下，您实际上只需要将源/日期部分放在它自己的div 中，以将其保留在容器的底部。
此外，您应该梳理您的标记。 有一些语法错误有点混乱。 您的代码编辑器或小提琴应该突出显示这些差异。
希望这有帮助！
.container {
border: 1px solid black;
}
.clearfix {
overflow: auto;
}
.header-link {
text-decoration: none;
color: green;
}
.img {
float: left;
margin: 20px 20px 10px;
}
.story-text {
margin: 20px;
}
.source-date {
float: right;
margin: 20px;
padding: 10px 20px;
background: red;
}<div class="container">
<div class="clearfix">
<img class="img" src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt="Pineapple" width="170" height="170">
<h3>
<a class="header-link" href="/news/4/">بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است</a>
</h3>
<p class="story-text">بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن مم این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن مم این است بیشترین متن ممکن این است بیشترین متن ممکن این استمتن ممکن این است بیشترین متن مم این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن مم این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن مم این است بیشترین متن ممکن این است بیشترین متن ممکن این است</p>
<div class="source-date">
31 مه 2018، ساعت 12:47
</div>
</div>
</div>