Html css响应、大小和定位

我正在尝试创建一个响应性强的网站。在网页左侧的topcontent中，我看到了一张图片，右侧是一个包含主要内容的div，图片下方是一个包含一些传统内容的小div。（见截图链接）现在我想做的是使主要内容与照片和div（图片下方）的高度相同。我知道我可以通过设置像素来做到这一点，但是当我想让它响应时，它就会被拧坏，因为图片中的自动高度设置。我在%中尝试过，但我没有正确地找到它。。这是代码，提前谢谢你的帮助（我是noob:（））

html:

---

如果将所有3个元素都放在另一个元素中，则可以将主要内容的高度设置为该容器的100%。当将静态高度与相对高度混合时，这通常是唯一的方法

---

请确保选择一种可扩展以适应内容的显示类型。

因此，我没有完全查看您的所有代码，因为我现在正在上课，但如果您希望使您的站点响应，请将此代码添加到css的末尾

@media screen and (max-width: 568px) {

.classToChange {
  color: red;
}

}

所以，如果你的屏幕568px宽，这些新的css变化将接管你的工作

    .content {
        width: 80%;
        clear: both;

        margin: 0 auto;
        margin-top: 40px;
        margin-bottom: 40px;
    }

.photo-column{
    width: 33.333333%;
    height: 300px;
    float: left;
}
.imageBox {
    height:auto !important;
    max-height: 90%;
    width: 96%;
}
.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%;
}
.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;
}
.tb-cnt-main{
    padding: 3% 4%;
    color:#FFF;
    font-family: Segoe ui;
    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;
    width: 58.6%;
    float:right;

}

@media screen and (max-width: 568px) {

.classToChange {
  color: red;
}

}