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中的源/日期部分将它保存在容器的底部。

另外，你应该梳理你的标记。有些语法错误会有点混乱。您的代码编辑器或小提琴应突出显示这些差异。

希望这有帮助！

.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与底部对齐

1 个答案: