使用css flexbox对齐项目，底部有阅读更多按钮

Question

这是两个并排分区的默认结构， 即使内容较少，我也希望将阅读更多按钮保留在屏幕底部。

 <div class="row">
<div class="col-12"> Image </div>
<div class="col-12"> 
<h1>Lorem ipsum</h1>
<p>all the content which will be strecth to full height</p>
<a>Read more</a>
 </div>
</div>

另外，当我将行设置为 100% 高度并对齐项目：strecth 时，我在两列之间获得了空间。

Answer 1

正如IvanS95 所指出的，您可以使用Bootstrap 的Card Deck 组件。如果您真的想自己使用 flexbox，下面的解决方案可能会有所帮助。

以下解决方案使用 Bootstrap 4.4.1

您可以查看正在工作的code pen solution here

.image-style {
  max-width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container py-4">
  <div class="row">
    <div class="col-6 p-2 d-flex flex-column  justify-content-start">
      <img src="https://picsum.photos/500/250" class="image-style" />
      <h4 class="px-2 mt-2">Lorem ipsum title</h4>
      <p class="px-2">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium ab inventore corrupti fugiat aperiam beatae nisi quod mollitia, soluta dolorum sequi blanditiis delectus ex impedit quia? Expedita eius libero adipisci!
      </p>
      <p class="px-2">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, fugit. Fugit iure qui expedita, necessitatibus beatae quaerat distinctio soluta quam ut enim doloremque mollitia ratione illo officiis, quibusdam fuga voluptate.
      </p>
      <p class="px-2">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas architecto odit repudiandae libero ex, neque modi explicabo quia delectus qui natus officiis nihil autem sit alias ab odio quisquam. Perferendis?
      </p>
      <a href="#" class="px-2 mt-auto">Read more</a>
    </div>
    <div class="col-6 p-2 d-flex flex-column  justify-content-start">
      <img src="https://picsum.photos/500/250" class="image-style" />
      <h4 class="px-2 mt-2">Lorem ipsum title</h4>
      <p class="px-2">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium ab inventore corrupti fugiat aperiam beatae nisi quod mollitia, soluta dolorum sequi blanditiis delectus ex impedit quia? Expedita eius libero adipisci!
      </p>
      <p class="px-2">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, fugit. Fugit iure qui expedita, necessitatibus beatae quaerat distinctio soluta quam ut enim doloremque mollitia ratione illo officiis, quibusdam fuga voluptate.
      </p>
      <a href="#" class="px-2 mt-auto">Read more</a>
    </div>
  </div>
</div>

在上面的 html 内行中，有两个 6 单位宽的列可以并排放置。使用 d-flex 类将每一列转换为 flex box，使用 flex-column 类将 flex 方向设置为列，并使用 justify-content-start 类设置 justify-content。现在，如果我将 margin-top 设置为 auto on read more 按钮，它将始终保持在底部。

为了确保图像宽度不会产生问题，我在图像元素上设置了图像样式类，定义如下，

CSS

image-style {
    max-width: 100%;
}

Answer 2

您可以使用@Hiren 建议的代码，但如果您不想使用，也不需要使用弹性框。以下是如何实现所需布局的示例：

<div class="container">
    <div class="row">
        <div class="col-6">
          <div class="card">
            <img src="https://picsum.photos/500/250" class="image-style" />
            <h4>Lorem ipsum title</h4>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium ab inventore corrupti fugiat aperiam beatae nisi quod mollitia, soluta dolorum sequi blanditiis delectus ex impedit quia? Expedita eius libero adipisci!
            </p>
            <a href="#" class="read-more-button">Read more</a>
          </div>            
        </div>  

      <div class="col-6">
          <div class="card">
            <img src="https://picsum.photos/500/250" class="image-style" />
            <h4>Lorem ipsum title</h4>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium ab inventore corrupti fugiat aperiam beatae nisi quod mollitia, soluta dolorum sequi blanditiis delectus ex impedit quia? Expedita eius libero adipisci!
            </p>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium ab inventore corrupti fugiat aperiam beatae nisi quod mollitia, soluta dolorum sequi blanditiis delectus ex impedit quia? Expedita eius libero adipisci!
            </p>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium ab inventore corrupti fugiat aperiam beatae nisi quod mollitia, soluta dolorum sequi blanditiis delectus ex impedit quia? Expedita eius libero adipisci!
            </p>
            <a href="#" class="read-more-button">Read more</a>
          </div>            
        </div>        
    </div>
</div>

CSS：

.card {
  position: relative;
  height: 100%;
  padding: 10px;
  padding-bottom: 30px;
}

.read-more-button {
  position: absolute;
  left: 10px;
  bottom: 15px;
}

如您所见，我为父元素 (card) 添加了填充，并为“阅读更多”按钮添加了绝对位置。这就是我们在没有 flexbox 时的做法。

请注意，我仍然使用 Bootstrap（即 flexbox）。