Question

如何在不使用JavaScript的情况下使所有h2容器高度相同？注意h2标题来自数据库，该数据库可能占用1/2/3行空间。我想要所有容器的最大行空间吗？

img {
  max-width: 100%;
  height: auto;
}

.grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-column-gap: 2rem;
}

<div class="container">
  <div class="grid">
    <div class="items">
      <div class="item-title">
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
      </div>
      <img src="https://via.placeholder.com/350x150" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="items">
      <div class="item-title">
        <h2>The quick brown fox jumps over the lazy dog.</h2>
      </div>
      <img src="https://via.placeholder.com/1400x600" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="items">
      <div class="item-title">
        <h2>The color is Green</h2>
      </div>
      <img src="https://via.placeholder.com/783x512" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="items">
      <div class="item-title">
        <h2>The quick brown fox jumps over the lazy dog.</h2>
      </div>
      <img src="https://via.placeholder.com/450x273" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
  </div>
</div>

这是CodePen演示： https://codepen.io/rejaulkarim/pen/xaXBLP

Answer 1

您可以向css或h2

添加一些item-title属性

h2 {
 line-height: 1.2;
 font-size: 25px;
 height: 90px;
}

如果您知道最大数量，则可以计算height

height = maximum number * line height * font-size

在此示例中：90 = 25 * 1.2 * 3

Answer 2

在您的css文件或样式标签中，输入以下代码。请注意，您要插入字体大小。

h2
{
font-size:20px;
width: auto;
}

这应该按您的意愿做，谢谢。

所有CSS网格列的h2容器高度相同

2 个答案: