html - 与 flexbox 底部对齐，同时有一个 float 到位

Question

我有一张图片、一个标题、一段文字、一个日期和一个来源。我想将图像放在左侧，将来源和日期放在底部。如果文本太多，它们将位于图像下方，这很好。但如果太少。我希望日期和来源位于图像旁边的底部，如下所示:

 -------------------------------
|###########           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|
 --------------------------------

一切正常，只是我无法获取源代码和日期。我尝试了很多解决方案，但到目前为止都没有奏效。

这是我的 fiddle :

Answer 1

有多种方法可以实现这种布局，这只是我认为可能对您有所帮助的一种快速解决方案(您可以探索 Grid 和/或 Flexbox 以获得其他布局解决方案)。它是您所提供内容的精简版，但您应该能够轻松地将任何缺失的内容插入到您的标记中。

在大多数情况下，您实际上只需要将源/日期部分放在它自己的 div 中，以将其保留在容器底部。

另外，您应该梳理您的标记。有一些语法错误有点困惑。您的代码编辑器或 fiddle 应突出显示这些差异。

希望这对您有所帮助!

.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>