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

Posted

技术标签:

【中文标题】整行的卡片/盒子尺寸相同，具体取决于最大的卡片【英文标题】：Card/ Box sizes same for the whole row depending on the largest card 【发布时间】：2021-11-03 08:56:07 【问题描述】：

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

我创建了一个包含三个框的三列行，其中包含不同数量的文本，因此当我尝试在下面添加其他框时它们看起来不太好。我尝试将 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 
            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>

【问题讨论】：

我帮助了你，请至少给我一个赞成票 【参考方案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>

【讨论】：

【参考方案2】：

我对您的代码进行了调整，使它们的高度相同，并使所有文本相互对齐。

您需要使内部容器具有 100% 的高度，以便内容从上到下填满空白区域。您还需要在内部容器上使用 flex 以均匀地放置内部内容。我在每个 css 代码上添加了 cmets 来解释我添加的每一件事。

<!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>

【讨论】：

以上是关于整行的卡片/盒子尺寸相同，具体取决于最大的卡片的主要内容，如果未能解决你的问题，请参考以下文章

如何从卡片或类似物中获取标题与弹性盒子具有相同的高度？

我如何在底部有页脚的所有屏幕上制作所有相同高度的卡片？

华为OD机试 - 卡片组成的最大数字（JavaScript） | 机试题+算法思路+考点+代码解析 2023

华为OD机试真题Python实现卡片组成的最大数字真题+解题思路+代码（2022&2023）

引导卡头 - 所有人的高度相同

在 Vuetify 中制作响应式卡片网格