如何使列内的 div 等高？

Question

问题：Div 未对齐：

问题是当文本换行时，例如Money back guarantee ，将 div 推出 alignment with 30 days 。 我正在尝试使用grid方法首先定义two columns 。

我的代码：

 .inline-features { display: grid; grid-template-columns: repeat(2, 1fr); }

 <div class="inline-features"> <div class="feature"> <div class="price col-1-item"> <span> Price </span> </div> <div class="money-back col-1-item"> <span> Money back guarantee </span> </div> <div class="number-of-lessons col-1-item"> <span> Number of lessons </span> </div> <div class="number-of-users col-1-item"> <span> Number of users </span> </div> <div class="country col-1-item"> <span> Based in country </span> </div> <div class="support col-1-item"> <span> Support </span> </div> <div class="video-lessons col-1-item"> <span> Video lessons </span> </div> <div class="downloadable-files col-1-item"> <span>Downloadable files</span> </div> </div> <div class="feature-item"> <div class="price-item col-2-item"> <span> From xx to xx </span> </div> <div class="money-back-item col-2-item"> <span> 30 days </span> </div> <div class="number-of-lessons-item col-2-item"> <span> 300+ </span> </div> <div class="number-of-users-item col-2-item"> <span> 35k + </span> </div> <div class="country-item col-2-item"> <span> UK</span> </div> <div class="support-item col-2-item"> <span> 24/7 live chat support </span> </div> <div class="video-lessons-item col-2-item"> <span> Yes </span> </div> <div class="downloadable-files-item col-2-item"> <span> Yes </span> </div> </div> </div>

Answer 1

您的 HTML 结构不正确。 试试这个方法。

要进行这种类型的设计，您可以使用 table. 这将是更好的管理方式。

 .inline-features{ width: 250px; }.row { display: grid; grid-template-columns: repeat(2, 1fr); }.col-1-item, .col-2-item { border: 1px solid black; }

 <div class="inline-features"> <div class="row"> <div class="col-1-item"> <span> Price </span> </div> <div class="col-2-item"> <span> From xx to xx </span> </div> </div> <div class="row"> <div class="col-1-item"> <span> Money back guarantee </span> </div> <div class="col-2-item"> <span> 30 days </span> </div> </div> <div class="row"> <div class="col-1-item"> <span> Number of lessons </span> </div> <div class="col-2-item"> <span> 300+ </span> </div> </div> </div>

Answer 2

 .inline-features { display: grid; grid-template-columns: repeat(2, 1fr); font-size: 4rem; border: 1px solid gray; }.col-1-item, .col-2-item { padding: 1rem; height:140px; border: 1px solid gray; }

 <div class="inline-features"> <div class="feature"> <div class="price col-1-item"> <span>Price</span> </div> <div class="money-back col-1-item"> <span>Money back guarantee</span> </div> <div class="number-of-lessons col-1-item"> <span>Number of lessons</span> </div> <div class="number-of-users col-1-item"> <span>Number of users</span> </div> <div class="country col-1-item"> <span>Based in country</span> </div> <div class="support col-1-item"> <span>Support</span> </div> <div class="video-lessons col-1-item"> <span>Video lessons</span> </div> <div class="downloadable-files col-1-item"> <span>Downloadable files</span> </div> </div> <div class="feature-item"> <div class="price-item col-2-item"> <span>From xx to xx</span> </div> <div class="money-back-item col-2-item"> <span>30 days</span> </div> <div class="number-of-lessons-item col-2-item"> <span>300+</span> </div> <div class="number-of-users-item col-2-item"> <span>35k +</span> </div> <div class="country-item col-2-item"> <span>UK</span> </div> <div class="support-item col-2-item"> <span>24/7 live chat support </span> </div> <div class="video-lessons-item col-2-item"> <span>Yes</span> </div> <div class="downloadable-files-item col-2-item"> <span>Yes</span> </div> </div> </div>

Answer 3

我建议使用而不是 div 并使用 CSS 作为边框或其他样式

<table> 
    <tr>
       <td>PRICE</td>
       <td>From XX to XX</td>
    </tr>
</table>