使三个 div（水平排列并嵌套在其他 div 中）具有相同的高度

Question

我有三篇文章水平对齐，结构相同：

日期、标题、活动时间、地点、图片、文字、按钮

我希望它们具有相同的高度（基于最长的文章），以便我可以开始工作。

我遇到的问题是，我希望所有三篇文章的每个部分都具有相同的高度，而下一部分需要从相同的高度开始。我尝试了很多解决方案（css flex、grid）但由于嵌套的 div 结构（我正在使用的 CMS 是 pre-generated），我无法使它们工作。

代码如下：

<div id="container">
  <article id="node-1">
  
    <div class="event-start">
      <span class="event-year">2021</span>
      <span class="event-start-month">Feb</span>
      <span class="event-start-day">18</span>
    </div>
  
    <div class="event-content">
      <header class="node-header">
        <h1 class="event-title">
          Test Event
        </h1>
      </header>

      <div>
        <div class="field-name-field-date">
          <div>
            <div class="event-time">
              <span>6:30pm</span>
            </div>
          </div>
        </div>

        <section class="field-name-field-event-location">
          <h2 class="field-label">Location:&nbsp;</h2>
          <div>
            <div class="event-location">Test Location</div>
          </div>
        </section>
        <div class="field-name-body">
          <div>
            <div>
              <p>
                <img> Image here</img>
              </p>
              <p> Text here
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </article>
  <article>
  </article>
  <article>
  </article>
</div>

示例：如果第一篇文章的标题很长并且 header 的高度为 300px，那么其他两篇文章（标题较短）的高度也应为 300px。因此，下一项（事件时间）应该在所有文章中以相同的高度开始。

Answer 1

对于这样的条件，您可以简单地使用 bootstrap 的 行，col by bootstrap 并获得所需的结果

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="row">
        <div class="col-md-4"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim voluptate deleniti quae, dolorem fugit temporibus! Beatae, reiciendis optio? Iure perferendis illo eveniet reprehenderit obcaecati tempore quae animi dolores porro tempora ipsam, cumque, rerum in consectetur omnis! Numquam, dolor est! Qui quasi placeat veniam voluptatum nostrum? Consectetur tempore ipsam modi perferendis vitae est ut quia totam, ipsum ducimus dolorem. Commodi doloribus alias tempore quam, pariatur saepe ad! Totam ex itaque harum soluta explicabo magnam, officia eos officiis porro dolores, quo dolorum? Amet saepe unde cupiditate mollitia sequi modi est veniam beatae porro cumque, natus ipsum rem excepturi nesciunt at quibusdam dolorem?</p></div>
        <div class="col-md-4"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, saepe!</p></div>
        <div class="col-md-4"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla ad rerum, odio quis omnis laborum corporis hic, pariatur, labore quidem odit adipisci veritatis ratione. Consectetur ducimus impedit provident eligendi delectus!</p></div>
    </div>
    <div class="row">
        <div class="col-md-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor vel corporis laboriosam reiciendis aliquid harum laudantium autem nesciunt illo soluta!</div>
        <div class="col-md-4"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis quibusdam vel distinctio, adipisci recusandae necessitatibus deserunt sint mollitia consequatur tenetur consectetur at, facere doloribus unde. Non dicta ducimus rerum voluptate repellendus nam dolore ab, voluptatem sequi corrupti iste tempora possimus commodi distinctio quae, hic aspernatur deleniti omnis. Rerum, quaerat illo!</p></div>
        
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Answer 2

如果没有更多的代码 (html/css)，很难看出解决这个问题的陷阱。但是您的问题的一种方法是将元素设置为与 JS 相同的高度。

假设：
article-elements --> 同高
title-elements --> 同高
等等...

为此，您可以使用如下 JS 代码段：

function sameHeight( selector ){
    
    const $elements = document.querySelectorAll( selector );
    let maxHeight = 0;

    for(let actualElement of $elements){
        actualElement.style.height = '';
        maxHeight = ( actualElement.offsetHeight > maxHeight ) ? actualElement.offsetHeight : maxHeight;
    }
    
    for(let actualElement of $elements){
        actualElement.style.height = maxHeight + 'px';
    }
    
}

// parameter selector 
// 'string'
// use every valid css selector (with '.' and '#' included to the string)

（请根据您的需要调整代码。）

使三个 div（水平排列并嵌套在其他 div 中）具有相同的高度

Make three divs (ordered horizontally and nested inside other divs) the same height

css

height