響應式瓷磚佈局只適用於寬度

我有這個奇怪的問題，我似乎不明白錯誤在哪裏。我正在構建基於我在線發現的教程的響應式拼貼布局。在教程中，瓦片的寬度爲20％，整個網站的工作基於此。所以，當我將百分比從20％改爲33.33％時，只有寬度增加，高度仍然在20％（切割瓷磚內的內容）。我不明白爲什麼這是hapening ...我已經試圖增加幾個不同類別的高度，但目前爲止沒有結果。響應式瓷磚佈局只適用於寬度

我會把代碼，以便您可以看看，hopefuly告訴我的錯誤是...

HTML：

<body class="no-touch"> 

<div class="wrap"> 

    <!-- Define all of the tiles: --> 
    <div class="box"> 
    <div class="boxInner"> 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" /> 
     <div class="titleBox">Just a caption</div> 
    </div> 
    </div> 
    <div class="box"> 
    <div class="boxInner"> 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" /> 
     <div class="titleBox">An old greenhouse</div> 
    </div> 
    </div> 
    <div class="box"> 
    <div class="boxInner"> 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg" /> 
     <div class="titleBox">Purple wildflowers</div> 
    </div> 
    </div> 
    <div class="box"> 
    <div class="boxInner"> 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg" /> 
     <div class="titleBox">A birdfeeder</div> 
    </div> 
    </div> 
    <div class="box"> 
    <div class="boxInner"> 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/10.jpg" /> 
     <div class="titleBox">Crocus close-up</div> 
    </div> 
    </div> 
    <div class="box"> 
    <div class="boxInner"> 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg" /> 
     <div class="titleBox">The garden shop</div> 
    </div> 
    </div> 

</div> 
<!-- /#wrap --> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    // See if this is a touch device 
    if ('ontouchstart' in window) 
    { 
     // Set the correct [touchscreen] body class 
     $('body').removeClass('no-touch').addClass('touch'); 

     // Add the touch toggle to show text when tapped 
     $('div.boxInner img').click(function(){ 
     $(this).closest('.boxInner').toggleClass('touchFocus'); 
     }); 
    } 
}); 
</script> 


</body>

CSS：

body { 
    margin: 0; 
    padding: 0; 
    background: #fff; 
    font: 18px 'voltaireregular',sans-serif; 
    margin:auto; 
} 

.wrap { 
    overflow: hidden; 
    margin: 10px; 
} 

.box { 
    float: left; 
    position: relative; 
    width:33.33%; 
    padding-bottom: 20%; 
} 

.boxInner { 
    position: absolute; 
    left: 10px; 
    right: 10px; 
    top: 10px; 
    bottom: 10px; 
    overflow: hidden; 
} 

.boxInner img { 
    width: 100%; 
} 

.boxInner .titleBox { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin-bottom: -50px; 
    background: #f1804b; 
    opacity:0.8; 
    color: #FFF; 
    padding: 10px; 
    text-align: center; 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
} 

body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox { 
    margin-bottom: 0; 
} 

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

    /* Smartphone view: 1 tile */ 

.box { 
    width: 100%; 
    padding-bottom: 100%; 
} 
} 

@media only screen and (max-width : 650px) and (min-width : 481px) { 

    /* Tablet view: 2 tiles */ 

.box { 
    width: 50%; 
    padding-bottom: 50%; 
} 
} 

@media only screen and (max-width : 1050px) and (min-width : 651px) { 

    /* Small desktop/ipad view: 3 tiles */ 

    .box { 
     width: 33.3%; 
     padding-bottom: 33.3%; 
    } 
} 

@media only screen and (max-width : 1290px) and (min-width : 1051px) { 

    /* Medium desktop: 4 tiles */ 
.box { 
    width: 25%; 
    padding-bottom: 25%; 
} 
}

所以...任何線索？提前致謝！

來源

2013-07-10 user2104321