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

Question

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

我正在尝试垂直对齐网站上 'related posts' 部分的阅读更多按钮。我想让阅读更多按钮自动与最长的字幕文本对齐。我用 relative/absolute 尝试了多种方法，但我似乎无法让它工作。

这是我当前的代码：

<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

您需要指定一个 div，其中所有子元素的高度都相同。我相信响应式设计也有一些特性。查看这篇文章：

How do I keep two side-by-side divs the same height?

答案下方的顶部评论建议：如果您正在开发响应式设计并且希望您的第二个 div 在较小的屏幕中下降，您需要将 .row 设置为显示：块；在你的媒体查询中。

我现在将运行为您进行一些测试和 post 代码片段

Answer 2

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

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

创建一个包含所有 post 的容器。这应该设置为显示：flex。将 flex 方向设置为列，这样我们就可以在大屏幕上使用媒体查询将其设置为行。
为每个 post 创建容器。这些 post 是我们刚刚创建的容器中的弹性项目
将您的图片、标题和内容包裹在一个 div 中，这样它就可以与阅读更多按钮 spaced 均匀地分开
现在您可以将每个 post 设置为 flex: 1 以便它们占用相等 space。接下来，您可以将每个 post 设置为 flex-direction: 列和 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;
}

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

Vertically align buttons below caption to longest text of three captions

css

wordpress

twitter-bootstrap

alignment

caption