div，左侧为图片，右侧为标题和文字

Question

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

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