Question

我之前提出了这个主题并提出了一个解决方案，但由于某种原因它没有用，我希望能找到更多的帮助。

我想让两个DIV的高度相同（所以当一个div的高度变大时，另一个div应该做同样的事情）。

这是我的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保持相同的高度。

这是我目前的CSS：

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

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

这是向我建议的解决方案，我把它放在：

之前

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

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

unequal height

关于如何做到这一点的任何想法？

Answer 1

this你想做什么？

我尝试使用display:table＆amp; display: table-cell;。

<强> CSS

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

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

查看此blog了解详情。

Answer 2

你可以尝试这个...... 实际上header有margin，所以把h3的CSS写成

h3 {
margin: 0;
}

如果以上工作正在尝试以下结构..

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

并将此CSS添加到您的CSS

.aProductHeader .omschrijving {
    background: #cac;
    min-height: 30px;
}
.aProductHeader {
    float: left;
}
.aProduct {
    overflow: hidden;
}
.aProduct .omschrijving {
    background: #cec;
    min-height: 30px;
}
h3 {
    margin: 0;
}

工作实例 http://jsfiddle.net/e6ba3/

Answer 3

.aProduct{background-color: #FFFFFF;
border-left: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
position: relative;} .aProductHeader{border-top: 1px solid #CA542B;
float: left;
min-height: 65px;
padding-bottom: 4px;
padding-top: 4px;
position: relative;
text-shadow: 1px 1px 1px #000000;
width: 70px;
z-index: 2;}.wrap{border-radius: 0 0 0 5px;
bottom: 0;
left: 0;
margin: 0;
padding-right: 1px;
position: absolute;
top: 0;
width: 70px;
z-index: 1;} 

Wtrite your html
  <div class="wrapper" style="position:realtive;border:1px solid red;"> 
    <div class="wrap"></div>
    <div calss="aProductHeader">xxxxx</div><div class="aProduct">xxx</div>
  </div>

Answer 4

无需编写Javascript / jQuery，您可以通过CSS实现此目的。

它将是灵活的，并保持div高度相同。

这是代码：

HTML：

<div class="main">
    <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>
            <span class="entry inner">
                Toddler bestek blauw
            </span>
            <span class="entry inner">
                Toddler bestek blauw
            </span>
            <span class="entry inner">
                Toddler bestek blauw
            </span>
            <span class="entry inner">
                Toddler bestek blauw
            </span>
            <span class="entry inner">
                Toddler bestek blauw
            </span>
        </div>
    </div>
</div>

CSS：

.main { position:relative; display:table;}
.aProductHeader .omschrijving {
    background: #cac;
    min-height: 30px;
    float:left;
    width:150px;
    position:absolute; left:0; top:0; bottom:0;
}

.aProduct .omschrijving {
    background: #cec;
    min-height: 30px;
    float:left;
    width:200px;
    margin-left:160px;
}

享受!!!

使两个DIV的高度相同？＃2

4 个答案:

使两个DIV的高度相同？ ＃2

4 个答案:

使两个DIV的高度相同？＃2