与 flexbox 底部对齐，同时有一个浮动到位

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

一切正常，只是我无法找到来源和日期。我尝试了很多解决方案，但 none 到目前为止都有效。

这是我的 fiddle:

Answer 1

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

在大多数情况下，您真的只需要将 source/date 部分放在它自己的 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>

与 flexbox 底部对齐，同时有一个浮动到位

Align to bottom with flexbox while having a float in place

html

css

alignment

css-float

flexbox