Question

我正在尝试创建一个响应式网站。在网页左侧的顶部内容中，我得到了一张图片，在右侧有一个div，里面有主要内容，在图片下面是一个带有一些附加内容的小div。（请参阅屏幕截图http://puu.sh/7VE8p.jpg的链接）现在我要做的是使maincontent与照片和div（图片下方）的高度相同。我知道我可以通过设置像素来做到这一点，但是当我想让它响应时，它会被拧紧，因为图片中的自动高度设置。我已经尝试了％，但我无法弄清楚..这是代码，感谢您的帮助（I＆＃39; ma noob :(）。

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的结尾。

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

.classToChange {
  color: red;
}

}

那么这将做的是如果您的屏幕568像素宽度这些新的CSS更改将接管。

css响应，大小和定位

2 个答案: