使两个DIV的高度相同？ ＃2 [英] Make two DIVs the same height? #2

问题描述

我提前做了这个主题，并提出了一个解决方案，但由于某种原因它不工作，我希望找到一些进一步的帮助。

I made this topic earlier and a solution has been suggested, but for some reason it doesn't work and I hope to find some further help.

使两个DIV具有相同的高度（所以当一个div变得更大时，另一个应该做同样的）。

I want to make two DIVs the same height (so when one div becomes bigger in height, the other one should do the same).

这是我的HTML：

<div class="aProductHeader">
    <div class="omschrijving">
        <h3>omschrijving</h3>
    </div>
</div>
<div class="aProduct">
    <div class="omschrijving">
        <span class="entry inner">
            Toddler bestek blauw
        </span>
    </div>
</div>

我想要 .aProductHeader .omschrijving .aProduct .omschrijving 保持相同的高度。

I would like .aProductHeader .omschrijving and .aProduct .omschrijving to keep the same height.

这是我当前的CSS：

.aProductHeader .omschrijving {
    background: #cac;
    min-height: 30px;
}

.aProduct .omschrijving {
    background: #cec;
    min-height: 30px;
}

这是我建议的解决方案，

And this is the solution which has been suggested to me, I put this before the :

<script>

var one = document.getElementsByClassName(".aProductHeader .omschrijving"),
    two = document.getElementsByClassName(".aProduct .omschrijving");

for (i = 0; i < one.length; i++)
{
  if (one[i].offsetHeight > two[i].offsetHeight)
  {
    two[i].style.height = one[i].offsetHeight+"px";
  }else{
    one[i].style.height = two[i].offsetHeight+"px";
  }
}

</script>

但是，我仍然得到的结果是：

However, the result I am still getting is this:

任何想法

推荐答案

此 您尝试做什么？

Is this what you are trying to do?

我尝试使用 display：table & display：table-cell; 。

I tried using display:table & display: table-cell;.

CSS b

#kasticketProducts{
    overflow:hidden;
    width:250px; /* for testing only */
    display: table;
}
.aProductHeader{
    display: table-cell; 
    background: #cac;
}

.aProduct{
    background: #cec;
    display: table-cell;     
}

检查此 blog 了解详情。

这篇关于使两个DIV的高度相同？ ＃2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！