css - 将标题下方的按钮垂直对齐到三个标题中最长的文本

Question

刚开始使用 Bootstrap 4 在 WordPress 中创建一个网站，几天来我一直在困惑一个问题。

我正在尝试垂直对齐网站上“相关帖子”部分的阅读更多按钮。我想让阅读更多按钮自动与最长的字幕文本对齐。我已经尝试了多种使用相对/绝对的方法，但我似乎无法让它发挥作用。

这是我当前的代码:

<div class="row">
    <?php $cat = new WP_Query( 'cat=6&posts_per_page=3' ); ?>
    <?php while($cat->have_posts()) : $cat->the_post(); ?>
        <div class="col-xs-12 col-md-4 readmore">
            <img class="w-100" src="<?php the_post_thumbnail_url(); ?>">
            <div class="col-12" style="margin-top:15px;">
                <h2 class="h6 text-uppercase text-center text-nowrap"><strong><?php the_title(); ?></strong></h2>
                <p><?php the_content(); ?></p>
                <p><?php //the_excerpt(); ?></p>
            </div>
            <div class="col-6 mx-auto" style="bottom: 10px;margin-bottom: 20px">
                <a href="<?php the_permalink(); ?>" class="d-block btn btn-secondary btn-sm">Read More</a>
            </div>    
        </div>
    <?php endwhile; ?> 
</div>
<?php wp_reset_postdata(); ?>

这是目前的样子:

使事情变得更加困难的是，理想情况下它仍然应该是响应式的。所以在较小的屏幕上，按钮应该紧跟在标题之后，如下所示:

希望清楚问题出在哪里，并希望有人可以分享他们的想法。提前致谢!

Answer 1

您不需要所有子元素的初始高度都相同。您可以使用 flexbox 来获得您想要的结果。

这是一个代码笔的链接，它显示了解决方案，下面有解释。 https://codepen.io/sugarbuzzdesigns/pen/ZjwQZb

• 创建一个包含您所有帖子的容器。这应该设置为显示:flex。将 flex 方向设置为列，这样我们就可以在大屏幕上使用媒体查询将其设置为行。
• 为每个帖子创建容器。这些帖子是我们刚刚创建的容器中的 flex 元素
• 将您的图片、标题和内容放在一个 div 中，这样它就可以与阅读更多按钮分开均匀分布
• 现在您可以将每个帖子设置为 flex: 1，以便它们占用相同的空间。接下来，您可以将每个帖子设置为 flex-direction: column 和 justify-content: space-between。

HTML

<div class="container">
  <div class="blog-post">
    <div>
      <h3>Heading Here</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat explicabo cumque reiciendis error hic soluta rem enim amet laborum consequuntur, delectus mollitia molestiae maiores ullam possimus non corporis. Animi, sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis expedita laudantium ut earum sint, numquam adipisci autem cupiditate dolorem aspernatur illo laboriosam, dolores quis? Perspiciatis debitis nesciunt corporis dicta eveniet!<p>
    </div>
    <a href="#">Read More</a>
  </div>
  <div class="blog-post">
    <div>
      <h3>Heading Here</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat explicabo cumque reiciendis error hic soluta rem enim amet laborum consequuntur, delectus mollitia molestiae.<p>
    </div>
    <a href="#">Read More</a>
  </div>  
    <div class="blog-post">
    <div>
      <h3>Heading Here</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat explicabo cumque reiciendis error hic soluta rem enim amet laborum consequuntur, delectus mollitia molestiae maiores ullam possimus non corporis. Animi, sit.<p>
    </div>
    <a href="#">Read More</a>
  </div>  
</div>

CSS

.container {
    display: flex;
}

@media (min-width: 600px) {
  .container {
     flex-direction: row;
  }
}

.blog-post {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
}