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(); ?>

这就是它目前的样子：

让事情变得更加困难的是，理想情况下它应该仍然是响应式的。因此，在较小的屏幕上，按钮应直接位于标题之后，如下所示：

希望很清楚问题是什么，希望有人可以分享他们的想法。提前致谢！

标签： csswordpresstwitter-bootstrapalignmentcaption

Answer 1

您不需要所有子元素最初都具有相同的高度。你可以使用 flexbox 来达到你想要的结果。

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

• 创建一个包含所有帖子的容器。这应该设置为 display: flex。将 flex 方向设置为 column，以便我们可以通过媒体查询将其设置为在更大屏幕上的 row。
• 为每个帖子创建容器。这些帖子是我们刚刚创建的容器中的弹性项目
• 将您的图像、标题和内容包装在一个 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;
}