Html 如何在列中设置具有相同大小图像的等高列

我希望列大小相等，列中的图像大小相等，例如，如果第一列的文本较少，而第二列有两个或三个段落文本，则应该相等，图像大小也应该与第二列图像相同，如果图像大小比第一列大或小，但应以相同的大小放入两列

<div class="container">
    <div class="row">
<!-- this is one column -->
    <div class="gold">
    <div class="products owl-one owl-carousel">
          <div class="pitem">
            <a href="#"><img src="images/world.jpg"></a>
            <h3><a href="#">this is title</a></h3>
            <p>this is paragraph</p>
          </div>

      </div>
    </div>

<!-- this second column -->
    <div class="gold">
    <div class="products owl-one owl-carousel">
          <div class="pitem">
            <a href="#"><img src="images/world.jpg"></a>
            <h3><a href="#">this is title</a></h3>
            <p>this is paragraph this is paragraph this is paragraph this is paragraph this is paragraph</p>
          </div>

      </div>
    </div>

<!-- this third column -->
    <div class="gold">
    <div class="products owl-one owl-carousel">
          <div class="pitem">
            <a href="#"><img src="images/world.jpg"></a>
            <h3><a href="#">this is title</a></h3>
            <p>this is paragraph this is paragraph this is paragraph</p>
          </div>

      </div>
    </div>

  </div>
</div>

---

使用bootstrap类col，它将自动使您的div响应并提供您所需的高度

---

Div class=col

首先：如果使用引导，请使用行内的列

一旦有了列，就不要乱设置列本身的高度（这似乎违背了使用响应列的全部意义）。相反，请尝试以下方法：

创建一个包含两列的行。 在每列中创建一个div。让我们将div称为“content”。该div将保存图像和文本

然后，使用JavaScript，我认为您可以获得2个div的高度。看看这个问题：

假设第1列中div的高度是

height1=20px

，第2列中div的高度是

height2=50px

。使用Javascript获取这些值，并将每个值设置为一个变量

使用一个条件语句来判断哪个更高。然后将任一div的高度设置为最大div的高度

我现在无法编写代码，但希望这个逻辑能有所帮助：

x=contentdiv1.getHeight（）

y=contentdiv2.getHeight（）

如果x>=y-->y.setHeight（x.height）

---

否则-->x.setHeight（y.height）

请同时添加css代码您可以使用Grid或FlexBox来完成此操作吗？在哪些浏览器中你需要这个功能？对于图像大小，你需要确保它们具有相同的纵横比，对于等高框，如果你使用flex@saurabh我已经添加了css代码，请在这件事上帮助我。谢谢你可能的副本

.gold{background: #d9edfb;}

.nopad{padding:0 !important;margin:0 !important;}

.products{position: relative; padding:25px 0px;}

.pitem {background: #fff; padding:12px; margin:5px; }

.pitem:hover{z-index: 50;border-radius: 3px;text-decoration: none;box-shadow: 0 7px 17px 0 rgba(23,84,116,0.18); border: solid 0.9px #f3f3f3;}

.pitem h3 {center; font-size: 15px}

.pitem img{width:100%; height: auto;}

.pitem p {margin-bottom: 20px; color:#444; text-align: justify;font-weight: 700;}