整行的卡片/盒子大小相同，具体取决于最大的卡片

Question

如何根据卡片中单词的长度使 3 列行中的框或卡片获得相同的高度？

我创建了一个包含三个框的三列行，其中包含不同数量的文本，所以当我尝试在下面添加其他框时它们看起来不太好。我尝试将 flex 关键字添加到 CSS 但有些东西不起作用。我没有也不打算在此文件上使用 bootstrap。

希望有人能帮我解决这个问题。提前致谢！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&display=swap');

        :root {
            --green: #00966B;
            --black: #2c2c54;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            outline: none;
            border: none;
            text-decoration: none;
            text-transform: capitalize;
            transition: all .2s linear;
            font-size: 100%;
            font-family: 'Poppins', sans-serif;
        }

        html {
            font-size: 62.5%;
            overflow-x: hidden;
            scroll-padding-top: 6.5rem;
            scroll-behavior: smooth;
        }

        .btn {
            display: inline-block;
            margin-top: 1rem;
            background: var(--green);
            color: #fff;
            padding: .8rem 3rem;
            font-size: 1.7rem;
            text-align: center;
            cursor: pointer;
        }

        .column33 {
            float: left;
            width: 33.3%;
            padding: 10px;
        }

        /* Clear floats after the columns */
        .row {
            content: "";
            display: table;
            clear: both;
            width: 100%;
            height: auto;
        }

        .product .box-container {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
        }

        .product .box-container .box {
            flex: 1 1 30rem;
            text-align: center;
            padding: 2rem;
            border: .1rem solid rgba(0, 0, 0, .3);
            border-radius: .5rem;
            overflow: hidden;
            position: relative;
        }

        .product .box-container .box h3 {
            color: var(--black);
            font-size: 2.5rem;
        }

        .product .box-container .box .quantity {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 1rem;
            padding-bottom: .5rem;
        }

        .product .box-container .box .quantity span {
            padding: 0 .7rem;
            font-size: 1.7rem;
        }

        .product .box-container .box .btn {
            display: block;
        }
    </style>
</head>

<body>

    <section class="product" id="product">
        <div class="box-container">
            <div class="row">
                <div class="column33">
                    <div class="box">
                        <h3>Pricing Strategist</h3>
                        <div class="quantity">
                            <span>Analyzes Data From Multiple Sources, Develop Complex Pricing Models, And Collaborate
                                With Sales And Marketing Teams To Develop Sales Strategies.</span>
                        </div>
                        <a onclick="Apply('${positions[i].Title}')" href="#" class="btn">Apply</a>
                    </div>
                </div>

                <div class="column33">
                    <div class="box">
                        <h3>Vice Manager</h3>
                        <div class="quantity">
                            <span>Manages The Supermarket In Absence Of The Manager</span>
                        </div>
                        <a onclick="Apply('${positions[i].Title}')" href="#" class="btn">Apply</a>
                    </div>
                </div>

                <div class="column33">
                    <div class="box">
                        <h3>Web Analyst</h3>
                        <div class="quantity">
                            <span>Responsible For Developing, Modifying And Maintaining Broad/Complex Computer
                                Systems.</span>
                        </div>
                        <a onclick="Apply('${positions[i].Title}')" href="#" class="btn">Apply</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>

</html>

Answer 1

你可以试试网格：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&display=swap');

        :root {
            --green: #00966B;
            --black: #2c2c54;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            outline: none;
            border: none;
            text-decoration: none;
            text-transform: capitalize;
            transition: all .2s linear;
            font-size: 100%;
            font-family: 'Poppins', sans-serif;
        }

        html {
            font-size: 62.5%;
            overflow-x: hidden;
            scroll-padding-top: 6.5rem;
            scroll-behavior: smooth;
        }

        .btn {
            display: inline-block;
            margin-top: 1rem;
            background: var(--green);
            color: #fff;
            padding: .8rem 3rem;
            font-size: 1.7rem;
            text-align: center;
            cursor: pointer;
        }

        .column33 {
           /* float: left;
            width: 33.3%;*/
            padding: 10px;
        }

        /* Clear floats after the columns */
        .row {
 
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            
            justify-items: center;
            clear: both;
            width: 100%;
            height: auto;
        }

        .product .box-container {
            /*display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;*/
        }

        .product .box-container .box {
            /*flex: 1 1 30rem;*/
            text-align: center;
            padding: 2rem;
            border: .1rem solid rgba(0, 0, 0, .3);
            border-radius: .5rem;
            overflow: hidden;
            position: relative;
            height: 100%;
            display: grid;
            grid-template-rows: minmax(min-content, 1fr) 3fr auto;
        }

        .product .box-container .box h3 {
            color: var(--black);
            font-size: 2.5rem;
            
        }

        .product .box-container .box .quantity {
            /*display: flex;
            align-items: center;
            justify-content: center;*/
            padding-top: 1rem;
            padding-bottom: .5rem;
            align-self: start;
        }

        .product .box-container .box .quantity span {
            padding: 0 .7rem;
            font-size: 1.7rem;
        }

        .product .box-container .box .btn {
            display: block;
            align-self: end;
        }

<body>

    <section class="product" id="product">
        <div class="box-container">
            <div class="row">
                <div class="column33">
                    <div class="box">
                        <h3>Pricing Strategist</h3>
                        <div class="quantity">
                            <span>Analyzes Data From Multiple Sources, Develop Complex Pricing Models, And Collaborate
                                With Sales And Marketing Teams To Develop Sales Strategies.</span>
                        </div>
                        <a onclick="Apply('${positions[i].Title}')" href="#" class="btn">Apply</a>
                    </div>
                </div>

                <div class="column33">
                    <div class="box">
                        <h3>Vice Manager</h3>
                        <div class="quantity">
                            <span>Manages The Supermarket In Absence Of The Manager</span>
                        </div>
                        <a onclick="Apply('${positions[i].Title}')" href="#" class="btn">Apply</a>
                    </div>
                </div>

                <div class="column33">
                    <div class="box">
                        <h3>Web Analyst</h3>
                        <div class="quantity">
                            <span>Responsible For Developing, Modifying And Maintaining Broad/Complex Computer
                                Systems.</span>
                        </div>
                        <a onclick="Apply('${positions[i].Title}')" href="#" class="btn">Apply</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>

Answer 2

我修改了你的代码，使它们高度相同，并使所有文本相互对齐。

您需要的是让内部容器的高度达到 100%，以便内容从上到下填充空白区域。您还需要在内部容器上使用 flex 以均匀放置内部内容。我已经在每个 css 代码上添加了评论来解释我添加的每件事。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&display=swap');

    :root {
      --green: #00966B;
      --black: #2c2c54;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      outline: none;
      border: none;
      text-decoration: none;
      text-transform: capitalize;
      transition: all .2s linear;
      font-size: 100%;
      font-family: 'Poppins', sans-serif;
    }

    html {
      font-size: 62.5%;
      overflow-x: hidden;
      scroll-padding-top: 6.5rem;
      scroll-behavior: smooth;
    }

    .btn {
      display: inline-block;
      margin-top: 1rem;
      background: var(--green);
      color: #fff;
      padding: .8rem 3rem;
      font-size: 1.7rem;
      text-align: center;
      cursor: pointer;
    }

    .column33 {
      height: 100%;
      /* height 100% to make it go all the way from top to bottom */
      width: 33.3%;
      padding: 10px;
    }

    /* Clear floats after the columns */
    .row {
      content: "";
      display: flex;
      /* use flex instead of table */
      clear: both;
      width: 100%;
      height: auto;
    }

    .product .box-container {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
    }

    .product .box-container .box {
      flex: 1 1 30rem;
      display: flex;
      /* make it a flex container to place things evenely inside with "justify-content" */
      flex-direction: column;
      justify-content: space-between;
      /* add this to put space between the inner elements */
      text-align: center;
      padding: 2rem;
      border: .1rem solid rgba(0, 0, 0, .3);
      border-radius: .5rem;
      /* overflow: hidden;
            position: relative;  I would remove this because they are not needed  (overflow and position) */
      height: 100%;
      /* also 100% height here to make inner container go all the way from top to bottom */
    }

    .product .box-container .box h3 {
      color: var(--black);
      font-size: 2.5rem;
    }

    .product .box-container .box .quantity {
      display: flex;
      justify-content: start; /* to place all text at the beginning of the inner container */ 
      height: 100%; /* make it take up all the space inside the inner container */
      padding-top: 1rem;
      padding-bottom: .5rem;

    }

    .product .box-container .box .quantity span {
      padding: 0 .7rem;
      font-size: 1.7rem;
    }

    .product .box-container .box .btn {
      display: block;
    }
  </style>
</head>

<body>

  <section class="product" id="product">
    <div class="box-container">
      <div class="row">
        <div class="column33">
          <div class="box">
            <h3>Pricing Strategist</h3>
            <div class="quantity">
              <span>Analyzes Data From Multiple Sources, Develop Complex Pricing Models, And Collaborate
                With Sales And Marketing Teams To Develop Sales Strategies.</span>
            </div>
            <a onclick="Apply('${positions[i].Title}')" href="#" class="btn">Apply</a>
          </div>
        </div>

        <div class="column33">
          <div class="box">
            <h3>Vice Manager</h3>
            <div class="quantity">
              <span>Manages The Supermarket In Absence Of The Manager</span>
            </div>
            <a onclick="Apply('${positions[i].Title}')" href="#" class="btn">Apply</a>
          </div>
        </div>

        <div class="column33">
          <div class="box">
            <h3>Web Analyst</h3>
            <div class="quantity">
              <span>Responsible For Developing, Modifying And Maintaining Broad/Complex Computer
                Systems.</span>
            </div>
            <a onclick="Apply('${positions[i].Title}')" href="#" class="btn">Apply</a>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

整行的卡片/盒子大小相同，具体取决于最大的卡片

Card/ Box sizes same for the whole row depending on the largest card

html

css

grid

flexbox