html - div，左边是图像，右边是标题和文本

Question

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

标签： htmlimagetextbootstrap-4

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>