Question

我想使列大小与列中的图像大小相等，例如，如果第一列具有较少的文本，第二列具有两个或三个段落文本，则其应相等，图像大小也应与第二列图像，如果图像尺寸比第一列大或小，但应以相等的大小适合两列。

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

此处是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;}

Answer 1

首先：如果您使用的是引导程序，请在行内使用列。

一旦有了列，就不要弄乱列本身的设置高度（这似乎与使用自适应列的整个观点背道而驰）。相反，请尝试以下操作：

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

然后，使用JavaScript，我认为您可以获得2格的高度。查看以下问题：How do you get the rendered height of an element?

因此，假设第1列中的div的高度为height1 = 20px，第2列中的div的高度为height2=50px。使用Javascript获取这些值，并将每个值设置为一个变量。

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

我现在无法编写代码，但希望这种逻辑会有所帮助：
    x = contentdiv1.getHeight()
   y = contentdiv2.getHeight()
    if x >= y --> y.setHeight(x.height)
    else --> x.setHeight(y.height)

Answer 2

使用bootstrap类col，它将自动使div响应并赋予您所需的高度 Div class = col

如何在列中具有相等高度的列和相等大小的图像

2 个答案: