css - 具有相同高度的 flex div 内的标题

Question

我正在设置 html 卡片。它们都需要具有相同的高度，但不仅如此，我还需要卡片内的标题具有相同的高度，因此无论标题长度如何，描述始终从同一点开始。这是与该问题相关的代码笔链接:

https://codepen.io/anon/pen/KLjXyx

{
      box-sizing: border-box;
    }
    body {
      background-color: #f5f5f5;
      margin: 0 auto; 
      max-width: 60em;
      line-height: 1.3;
    }
    ul, li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    img {
      width: 100%;
    }
    h2 {
      margin-top: 0;
      margin-bottom: 0.4em;
    }

    /*Flex items*/
    .list {
      display: flex;
      flex-wrap: wrap;
    }
    .list-item {
    	display: flex; 
      padding: 0.5em;
    	width: 100%;
    }
    @media all and (min-width: 40em) {
      .list-item {
        width: 50%;
      }
    }
    @media all and (min-width: 60em) {
      .list-item {
        width: 33.33%;
      }
    }
    .list-content {
    	background-color: #fff;
      display: flex;
      flex-direction: column;
      padding: 1em;
    	width: 100%;
    }
    .list-content p {
    	flex: 1 0 auto;
    } 

<li class="list-item">
        <div class="list-content">
          <h2>This title is way longer than the rest, yet I need the rest to be the same height so the paragraph starts at the same point</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
          <a href="">Link</a>
        </div>
      </li>

         <li class="list-item">
        <div class="list-content">
          <h2>Title</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
          <a href="">Link</a>
        </div>
      </li>

      <li class="list-item">
        <div class="list-content">
          <h2>Title</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
          <a href="">Link</a>
        </div>
      </li>
    </ul> 

Answer 1

var maxheight=0;
$("h2").each(function(){
	if($(this).height()>maxheight){
		maxheight=$(this).height();
	}
})
$("h2").height(maxheight);

* {
  box-sizing: border-box;
}
body {
  background-color: #f5f5f5;
  margin: 0 auto; 
  max-width: 60em;
  line-height: 1.3;
}
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  width: 100%;
}
h2 {
  margin-top: 0;
	overflow:hidden;
  margin-bottom: 0.4em;
}

/*Flex items*/
.list {
  display: flex;
  flex-wrap: wrap;
}
.list-item {
	display: flex; 
  padding: 0.5em;
	width: 100%;
}
@media all and (min-width: 40em) {
  .list-item {
    width: 50%;
  }
}
@media all and (min-width: 60em) {
  .list-item {
    width: 33.33%;
  }
}
.list-content {
	background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1em;
	width: 100%;
}
.list-content p {
	flex: 1 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>This title is way longer than the rest, yet I need the rest to be the same height so the paragraph starts at the same point</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
      <a href="">Link</a>
    </div>
  </li>
	
	 <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
      <a href="">Link</a>
    </div>
  </li>
  
  <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
      <a href="">Link</a>
    </div>
  </li>
</ul>

这将始终采用 h2 的最大高度并将其应用于所有其他 h2 元素!所以所有的文字描述都将从同一层级开始!