2个相同高度的色谱柱尺寸不正确

Question

我试图使两列与我的网页高度相同，其中之一是图像和其下方的小文本框，我的代码是：

        <div class="third-column" style="height: 600px">

            <div class="imageBox">
                <img src="images/rikkertCC.jpg" alt="" >
            </div>

            <div class="tekstBallon">
                <a href="#portolio">

                    <div class="triangle"></div>

                    <div class="tb-cnt">
                        <p>
                            Text
                        </p>
                    </div>
                </a>

            </div>
        </div>

和CSS：

.third-column {
    width: 33.333333%;
    height: 300px;
    float: left;

}

.imageBox {
    height:auto !important;
    max-height: 90%;
    width: 96%;
}

.imageBox img {
    max-width: 100%;
    max-height: 100%;
}


.triangle{

    position: initial;
    height: 15px;
    width: 25px;    
    margin-left:5%;;



    -webkit-transform:rotate(45deg);
    -moz-transform: rotate(45deg);
    transform:rotate(45deg);

    background-color:#26a0da;

    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -o-transition: all 1.5s;
    -ms-transition: all 1.5s;
    transition: all 1.5s;
}

.tekstBallon {
    display: inline-block;
    background-color: #26a0da;

    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -o-transition: all 1.5s;
    -ms-transition: all 1.5s;
    transition: all 1.5s;

    float:left;

    height: auto;
    max-height: 16%;

    width: auto;
    max-width: 96%;

    margin-top:3.3%;
}

.textBox {
    display: inline-block;
    background-color: #323232;

    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -o-transition: all 1.5s;
    -ms-transition: all 1.5s;
    transition: all 1.5s;

    float:left;

    height: 100%;
    width: 100%;
}

我想使该列与“ imageBox”和“ tekstBallon”的高度相同：

        <div class="twothird-column" >
            <div class="textBox">
                <div class="tb-cnt">
                    <h2>Over ons</h2>
                    <p class="postInfo"> <b>Is dit wel nodig?</b></p>
                    <p>  
                        text
                    </p>
                </div>
            </div>
        </div>

以及CSS：

.twothird-column {
    width: 66.666666%;
    float: right;
    height: 600px;
}

当我用这段JavaScript尝试时：

  $(".topContent .twothird-column").css("height", $(".topContent .third-column").height());

但这并没有帮助。它使正确的列（twoThirdColumn）更小了。

同样，您可以看到，图像将自身调整为最大90％。 这有关系吗？

我如何才能使它们的高度相同？

Answer 1

JavaScript的解决方案是

$(".topContent .twothird-column").height($(".topContent .third-column").height());

您正在使用jQuery css函数设置height属性，该值由height函数返回的值（无单位）； 因此您仍然需要在其上附加'px'字符串。

Answer 2

只需删除third-column html div的style属性，然后像这样更正同一div的CSS代码即可：

.third-column {
    width: 33.333333%;
    height: 600px;
    float: left;
} 

不需要JS / JQuery。