等高宽列 CSS

Question

既然我们已经解决了其中一个问题，现在我还有另一个问题。 如何创建所有列的高度和宽度相等，即使其中一些列上的文本更多？ 我试过 flexbox，但一点运气都没有。 每一个建议都将受到高度赞赏。

提前致谢。

这是代码片段：

<!DOCTYPE HTML>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    * {
      box-sizing: border-box;
    }

    .containers {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .container {
      padding: 10px;
    }

    .price {
      list-style-type: none;
      border: 1px solid #eee;
      margin: 0;
      padding: 0;
      -webkit-transition: 0.3s;
      transition: 0.3s;
    }

    .price:hover {
      box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
    }

    .price .header {
      background-color: #6f8bab20;
      color: rgb(0, 0, 0);
      font-size: 25px;
    }

    .price li {
      border-bottom: 1px solid #eee;
      padding: 20px;
      text-align: center;
    }

    .price .grey {
      background-color: #eee;
      font-size: 20px;
    }

    .button {
      background-color: #253c57;
      border: none;
      color: white;
      padding: 10px 25px;
      text-align: center;
      text-decoration: none;
      font-size: 18px;
    }

    #price {
      font-size: 50px;
    }

    @media only screen and (max-width: 600px) {
      .columns {
        width: 100%;
      }

      .button {
        font-size: 12px;
      }
    }
  </style>
</head>

<body>
  <h2 style="text-align: center">Responsive Pricing Tables</h2>
  <p style="text-align: center">
  </p>
  <div class="containers">
    <div class="container">
      <ul class="price">
        <li class="header">Training Coaching</li>
        <li class="grey" id="price">&pound 60 / month</li>
        <li>Fully tailored training programme adapted to your goals</li>
        <li>Technical review of the exercises</li>
        <li>Bodyweight/gym equipment</li>
        <li>Home/gym based</li>
        <li>Video Demonstration</li>
        <li>Weekly check-ins</li>
        <li>24/7 WhatsApp contact</li>
        <li class="grey">
          <a href="#" class="button">BOOK A FREE CONSULTATION</a>
        </li>
      </ul>
    </div>
    <div class="container">
      <ul class="price">
        <li class="header" style="background-color: #65e6f7">
          Vip Online Coaching
        </li>
        <li class="grey" id="price">&pound 120 / month</li>
        <li>Fully tailored macronutrient/nutritional guide</li>
        <li>Fully tailored training programme</li>
        <li>Exercise technique analysis</li>
        <li>Supplement guidance</li>
        <li>24/7 WhatsApp contact</li>
        <li>Weekly check-ins</li>

        <li class="grey">
          <a href="#" class="button">BOOK A FREE CONSULTATION</a>
        </li>
      </ul>
    </div>
    <div class="container">
      <ul class="price">
        <li class="header">Nutrition Coaching</li>
        <li class="grey" id="price">&pound 60 / month</li>
        <li>Adapted to your goals, personal preferences and allergies</li>
        <li>Fully tailored nutritional plan</li>
        <li>Shopping guidance</li>
        <li>24/7 WhatsApp contact</li>
        <li>Weekly check-ins</li>
        <li class="grey">
          <a href="#" class="button">BOOK A FREE CONSULTATION</a>
        </li>
      </ul>
    </div>
    <div class="container">
      <ul class="price">
        <li class="header">3 Months Online Coaching</li>
        <li class="grey" id="price">&pound 300 / month</li>
        <li>Fully tailored macronutrient/nutritional guidance</li>
        <li>Fully tailored training programme</li>
        <li>Supplement guidance</li>
        <li>24/7 WhatsApp contact</li>
        <li>Weekly check-ins</li>
        <li class="grey">
          <a href="#" class="button">BOOK A FREE CONSULTATION</a>
        </li>
      </ul>
    </div>
    <div class="container">
      <ul class="price">
        <li class="header">Video Consultation</li>
        <li class="grey" id="price">&pound 40 / month</li>
        <li>Overcoming healthy lifestyle barriers</li>
        <li>Psychonutritional barriers</li>
        <li>Training questions</li>
        <li class="grey">
          <a href="#" class="button">BOOK A CONSULTATION</a>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

Answer 1

尝试这个：

 * { box-sizing: border-box; }.containers{ display: flex; flex-wrap: wrap; justify-content: center; }.container{ padding: 10px; }.price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; height: 100%; }.price:hover { box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2); }.price.header { background-color: #6f8bab20; color: rgb(0, 0, 0); font-size: 25px; }.price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; }.price.grey { background-color: #eee; font-size: 20px; }.button { background-color: #253c57; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } #price { font-size: 50px; } @media only screen and (min-width: 1200px) {.container { width: 33.33%; } } @media only screen and (max-width: 1200px) {.container { width: 100%; } } @media only screen and (max-width: 600px) {.columns { width: 100%; }.button{ font-size: 12px; } }

 <,DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> </head> <body> <h2 style="text-align: center">Responsive Pricing Tables</h2> <p style="text-align: center"> </p> <div class="containers"> <div class="container"> <ul class="price"> <li class="header">Training Coaching</li> <li class="grey" id="price">&pound 60 / month</li> <li>Fully tailored training programme adapted to your goals aaaaaaaaaaaaaajdfh mbjhzdgc</li> <li>Technical review of the exercises</li> <li>Bodyweight/gym equipment</li> <li>Home/gym based</li> <li>Video Demonstration</li> <li>Weekly check-ins</li> <li>24/7 WhatsApp contact</li> <li class="grey"> <a href="#" class="button">BOOK A FREE CONSULTATION</a> </li> </ul> </div> <div class="container"> <ul class="price"> <li class="header">Training Coaching</li> <li class="grey" id="price">&pound 60 / month</li> <li>Fully tailored training programme adapted to your goals</li> <li>Technical review of the exercises</li> <li>Bodyweight/gym equipment</li> <li>Home/gym based</li> <li>Video Demonstration</li> <li>Weekly check-ins</li> <li>24/7 WhatsApp contact</li> <li class="grey"> <a href="#" class="button">BOOK A FREE CONSULTATION</a> </li> </ul> </div> <div class="container"> <ul class="price"> <li class="header">Training Coaching</li> <li class="grey" id="price">&pound 60 / month</li> <li>Fully tailored training programme adapted to your goals</li> <li>Technical review of the exercises</li> <li>Bodyweight/gym equipment</li> <li>Home/gym based</li> <li>Video Demonstration</li> <li>Weekly check-ins</li> <li>24/7 WhatsApp contact</li> <li class="grey"> <a href="#" class="button">BOOK A FREE CONSULTATION</a> </li> </ul> </div> <div class="container"> <ul class="price"> <li class="header">Training Coaching</li> <li class="grey" id="price">&pound 60 / month</li> <li>Fully tailored training programme adapted to your goals</li> <li>Technical review of the exercises</li> <li>Bodyweight/gym equipment</li> <li>Home/gym based</li> <li>Video Demonstration</li> <li>Weekly check-ins</li> <li>24/7 WhatsApp contact</li> <li class="grey"> <a href="#" class="button">BOOK A FREE CONSULTATION</a> </li> </ul> </div> <div class="container"> <ul class="price"> <li class="header">Training Coaching</li> <li class="grey" id="price">&pound 60 / month</li> <li>Fully tailored training programme adapted to your goals</li> <li>Technical review of the exercises</li> <li>Bodyweight/gym equipment</li> <li>Home/gym based</li> <li>Video Demonstration</li> <li>Weekly check-ins</li> <li>24/7 WhatsApp contact</li> <li class="grey"> <a href="#" class="button">BOOK A FREE CONSULTATION</a> </li> </ul> </div> </div> </body> </html>

等高宽列 CSS

问题描述

1 个解决方案

解决方案1
0 2022-09-04 15:18:58

等高宽列 CSS

问题描述

1 个解决方案

解决方案1 0 2022-09-04 15:18:58

解决方案1
0 2022-09-04 15:18:58