html - 响应式div适配父容器高度

Question

我正在尝试启用 3 个框来填充其响应容器的高度，我已经查看了网络上的大量教程，但似乎没有任何帮助。

测试现场直播看这里:http://pagedev.co.uk/bowmite/

我只希望最新元素的 3 个顶部白框适合其容器的高度。我认为它们的高度各不相同，看起来很不整洁。

如果您需要任何其他信息，请告诉我。

下面是我的html:

<!-- 3 latest Projects -->
<div class="home-projects">
    <!-- One Project -->
    <div class="home-project-item">
        <img class="home-project-image" src="images/postimage.jpg">
        <div class="home-project-copy">
            <p>Our experienced team of fully certified engineers regularly work on projects in excess of £4m in value, often working alongside main contractors on entire new build estates or prestige new buildings as you can see in our projects pages.</p>
        </div>
    </div>

    <!-- One Project -->
    <div class="home-project-item">
        <img class="home-project-image" src="images/postimage.jpg">
        <div class="home-project-copy">
            <p>Based in Essex, our focus is across London and within the M25, working for some of the leading construction companies in the country. Our growing reputation is such that many of our contracts are repeat business from our long established clients.</p>
        </div>
    </div>

    <!-- One Project -->
    <div class="home-project-item">
    <img class="home-project-image" src="images/postimage.jpg">
        <div class="home-project-copy">
            <p>BEMs highly experienced workforce are fully qualified and certified. All of our operatives hold up to date CSCS cards and company accreditations include NICEIC, Gas Safe, Construction Line, SSIP and CHAS.</p>
        </div>
    </div>
</div>

这是我的 CSS:

.home-projects  {
    width:100%;
    height:auto;
    float:left;
    margin-bottom:20px;
}

.home-project-item  {
    background-color:#ffffff;
    width:31.333%;
    margin-right:3%;
    float:left;
    position:relative;

    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -khtml-border-radius: 4px;
}

.home-project-item:nth-child(3) {
    margin-right:0%;
}

.home-project-image {
    width:100%;

    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0;

    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0;
}

.home-project-copy  {
    padding-right:20px;
    padding-left:20px;
    padding-top:25px;
    padding-bottom:15px;
}

Answer 1

你应该尝试添加:

height: 10em;

到 .home-project-copy 这使它们具有相同的高度。