響應div適合父容器的高度

我試圖啓用3個盒子來填充它的響應容器的高度，我看過網上的許多教程，似乎沒有什麼幫助。響應div適合父容器的高度

測試網站是住在這裏看看：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; 
}

來源

2014-10-31 lbollu

你可以爲'.home-project-item'添加一個'min-height：400px;'，但我不知道這是如何在響應式設計中發揮作用的。 – chriz 2014-10-31 12:00:07

你應該嘗試添加：

height: 10em;

來。家裏項目複製，這使他們都是一樣的高度。

來源

2014-10-31 12:07:49 Stefan

如果舊的瀏覽器支持不符合flexbox。

在你的情況下，只有增加display: flex到.home-projects會讓您預期的那樣工作：在Flexbox的

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

更多的信息在這裏http://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2014-10-31 12:18:54 Luizgrs

我只是增加最小高度：360像素的框，然後在媒體上查詢確實min-height：inherit;

來源

2014-10-31 16:46:15 lbollu

響應div適合父容器的高度

回答

相關問題