CSS响应，调整大小和位置

Question

我正在尝试创建一个响应式网站。 在网页左侧的topcontent中，我得到了一张图片，在右侧有一个div，其中包含主要内容，在图片下方是一个带有一些附加内容的小div。 （请参阅截图的链接http://puu.sh/7VE8p.jpg ）现在我要做的是使maincontent与照片和div（在照片下方）的高度相同。 我知道我可以通过将其设置为像素来做到这一点，但是当我想使其响应时，它将被拧紧，因为图片中的autoheight设置很简单。 我已经用％尝试过，但是我无法弄清楚。.这是代码，感谢您的事先帮助（我是菜鸟:(）。

的HTML：

  <div class="content">

                <div class="photo-column" style="height: auto;">

                    <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>
                                    Meer tekst, en meer tekst, en meer ekst, en meer tekst en meer tekst en meer tekst en meer tekst en meer tekst
                                </p>
                            </div>
                        </a>

                    </div>
                </div>

                <!--                <div class="third-column" style="height: 100%">   was 600px, snap niet wrrm de imagecontent hierin stond    
                                </div>-->



                        <div class="tb-cnt-main">
                            <h2>Over ons</h2>
                            <p class="postInfo"> <b>Is dit wel nodig?</b></p>
                            <p>  
                                DiD-Zeeland is een IT-bedrijf die zorgt dat de klant krijgt waar ze 
                                om vragen, voor een betaalbare prijs. Eén van de streven van 
                                DiD-Zeeland, is om een goede naam te krijgen binnen Zeeland 
                                als het gaat om IT-klussen voor de thuisgebruiker, maar ook voor bedrijven.
                            </p>
                        </div>

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;

}

Answer 1

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

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

Answer 2

因此，由于我现在正在上课，因此我没有完全查看您的所有代码，但是如果您想让您的网站具有响应能力，则需要将此代码添加到CSS的END中。

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

.classToChange {
  color: red;
}

}

因此，如果您的屏幕为568 px宽度，这些新的CSS更改将接管，将执行此操作。