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

只需删除style html div的third-column属性，然后更正相同div的css代码：

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

不需要JS / JQuery。

2相同高度的列未正确调整大小

2 个答案: