div，左边是图像，右边是标题和文本[重复]

【问题标题】：div with image on left and title and text on right [duplicate]div，左边是图像，右边是标题和文本[重复]
【发布时间】：2019-03-28 02:08:49
【问题描述】：

我需要创建与图片完全相同的div。左侧应填写image，右侧填写标题和说明。考虑到左边是col-5，右边是col-7或类似的东西，而且图片无论原始大小，都应该放在里面，描述可以很长。所以div 应该可以垂直扩展。如果描述很长，是否可以实现"read more" 按钮并仅显示第一个300 chars，然后单击按钮，展开其余部分？

【问题讨论】：

到目前为止你尝试过什么？

标签： html image text bootstrap-4

【解决方案1】：

使用flexbox实现比较简单：

.section {
  border: 1px solid #ccc;
  display: flex;
  flex-direction: row;
  font-family: sans-serif;
}

.paragraph {
  color: #555;
  display: flex;
  flex-direction: column;
}

.content {
  padding: 20px;
}

.title {
  font-size: 24px;
  color: #222;
  line-height: 24px;
}

<section class="section">
  <img src="https://placehold.it/150x150" class="image" />
  <div class="content">

    <h2 class="title">
      This is a title
    </h2>
    <p class="paragraph">

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At non ex earum, libero dignissimos voluptates. Quis beatae dolorem autem ipsa!
    </p>
  </div>
</section>

【讨论】：