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这会给它们提供相同的高度。

Answer 2

如果不打算支持旧的浏览器，请使用flexbox。

在您的情况下，仅将display: flex添加到.home-projects会使其按预期运行：

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

此处有关Flexbox的更多信息http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

我刚刚在框中添加了min-height：360px，然后在媒体查询中执行了min-height：inherit;

响应div适合父容器的高度

3 个答案: