html - CSS 响应、大小和定位

Question

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

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%。将静态高度与相对高度混合时，这通常是唯一的方法。

请务必选择可扩展以适合内容的显示类型。