使用flex使div具有相同的高度

Question

使用flex使div具有相同的高度

3

我有一些块，希望它们能够在同一行显示，并且无论文本内容多少都有相同的高度。文本内容可能随时变化。我已经让这些块在同一行显示了，但是如何使它们的高度相同我不知道该怎么做。

HTML：

<div class="article_block">
   <div class="article_block_content">
       <div class="article_block_content_left">
          <img class="article_image" alt="<%= headline %>" title="<%= headline %>" src="<%= media_path %>"/>
        </div>

        <div class="article_block_content_right">
          <h5 class="article-tag"><%= category.name %></h5>
          <h2 class="article-title"><%= headline %></h2>
          <h4 class="article-subtitle">This is the future home of the article headline. I hope this makes you want to read the article.</h4>
        </div>
    </div>
</div>

CSS（层叠样式表）：

.article_block {
    width: 33%;
    display: inline-flex;

    .article_block_content{
      margin: 10px;
      height: inherit;

      .article_block_content_left {

      }
      .article_block_content_right {
        padding: 20px;

        .article-tag {
          text-align: center;
          color: #7d8a8f;
          text-transform: capitalize;
          font-size: 14px;
          font-family: 'Open Sans';
          padding-top: 15px;
        }
        .article-title {
          text-align: center;
          font-family: 'Merriweather';
          color: #333;
        }
        .article-subtitle {
          text-align: center;
          font-family: 'Merriweather';
          font-style: italic;
          color: #464849
        }
      }
    }
  }

目前正在发生以下情况

- Andrew C

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam Jenkins · Accepted Answer

在您的 .article-block divs 的父级元素上设置 display: flex。这将使三个 .article-block divs 保持相同的高度（因为 align-items 的默认值是 stretch）。请注意保留 HTML 标签。

* { box-sizing: border-box; }

.article-block-wrap {
  display: flex;
  margin: 0 -10px;
}

.article_block {
    padding: 5px;
    display: flex;
    flex: 0 0 33.333%;
    overflow: hidden;
}

.article_block_content{
    background: rgba(0,0,0,0.2);
}

.article_block_content_left {
    text-align: center;
}

.article_block_content_right {
  padding: 20px;
}

.article-tag {
  text-align: center;
  color: #7d8a8f;
  text-transform: capitalize;
  font-size: 14px;
  font-family: 'Open Sans';
  padding-top: 15px;
}

.article-title {
  text-align: center;
  font-family: 'Merriweather';
  color: #333;
}

.article-subtitle {
  text-align: center;
  font-family: 'Merriweather';
  font-style: italic;
  color: #464849
}

<div class="article-block-wrap">

  <div class="article_block">
     <div class="article_block_content">
         <div class="article_block_content_left">
            <img class="article_image" src="https://placekitten.com/150/275"/>
          </div>

          <div class="article_block_content_right">
            <h5 class="article-tag">Category Name</h5>
            <h2 class="article-title">This is a long headline</h2>
            <h4 class="article-subtitle">This is the future home of the article headline. I hope this makes you want to read the article.</h4>
          </div>
      </div>
  </div>

  <div class="article_block">
     <div class="article_block_content">
         <div class="article_block_content_left">
            <img class="article_image" src="https://placekitten.com/150/300"/>
          </div>

          <div class="article_block_content_right">
            <h5 class="article-tag">Category Name</h5>
            <h2 class="article-title">This is a much longer headline than either the first or third block</h2>
            <h4 class="article-subtitle">This is the future home of the article headline. I hope this makes you want to read the article.</h4>
          </div>
      </div>
  </div>

  <div class="article_block">
     <div class="article_block_content">
         <div class="article_block_content_left">
            <img class="article_image" src="https://placekitten.com/150/250"/>
          </div>

          <div class="article_block_content_right">
            <h5 class="article-tag">Category Name</h5>
            <h2 class="article-title">This is a slightly longer headline</h2>
            <h4 class="article-subtitle">
              This is the future home of the article headline. I hope this makes you want to read the article.
              This is the future home of the article headline. I hope this makes you want to read the article.
            </h4>
          </div>
      </div>
  </div>
     
</div><!-- .article-block-wrap -->