Question

我目前正在教自己如何设置响应式网格布局，以便自动调整设备尺寸。到目前为止一切都那么好，但我对一些不调整的盒子的高度有问题。请参阅此处获取代码http://jsfiddle.net/shuka/tbe32q3h/

HTML

<body>
<div id="section2">
<div class="container grid2">
    <article class="col half">MAP</article>
    <article class="col half" style="background-color:#069;">
        <div class="grid2">
            <article class="col quater">BOX 1</article>
            <article class="col quater">BOX 2</article>
        </div>
        <div class="grid2">
            <article class="col quater">BOX 3</article>
            <article class="col quater">BOX 4</article>
        </div>
    </article>
    <br/>
</div>

CSS

body {
    margin: 0;
    padding: 0;
 }
#section1 br,#section2 br,#section3 br, #topbar br {
clear: both;
}
.container {
margin: auto;
max-width: 1400px;
overflow:hidden;
}

.col { 
background: #eee;
float: left;
margin-left: 1.4%;
margin-bottom: 20px;
}
.grid2 .col {
width: 49.3%;
}
.grid2 .half {

/*width: 48.4%;*/
height:49.3vw;
/*max-width:678px;*/
max-height:690px;
/*float:left;*/
position:relative;
}
.grid2 .quater {
margin-left: 2.1%;
margin-bottom: 2.1%;
width: 48.95%;
height:48.95vw;
/*max-width:317px;*/
max-height:338px;
/*  float:left;*/
position:relative;
}
.grid4 .col:nth-of-type(4n+1), .grid3 .col:nth-of-type(3n+1), .grid2 .col:nth-of-type(2n+1) {
margin-left: 0;
clear: left;
}

正如你所看到的那样，当你调整大盒子的大小时会发生变化，但问题是4个较小的盒子，宽度会改变，但高度会保持不变。我希望这四个盒子保持正方形，但是当屏幕调整大小时会变小，如果有人能发现我错过的东西，我将非常感激。

干杯舒卡

Answer 1

这是一个棘手的布局，但我做了一些游戏，我觉得我有一些适合你的东西：

http://jsfiddle.net/CaseyRule/h0drc99g/

我决定用硬编码的数字来处理最大宽度场景，如下所示：

@media (min-width: 900px) { /* max-width of container */

    .half { 
        height: 450px; /* max-width * 50% */
    }

    .half.col1 {    
        width: 432px; /* max-width * 48% */
    }
    .half.col2 {    
        width: 450px; /* max-width * 50% */
    }
    .quarter {
        width: 216px; /* max-width * 24% */
        height: 216px; /* max-width * 24% */
    }

    .half.col1, .quarter.col1 {
        margin-right: 18px; /* max-width * 2% */
    }

    .row1 .quarter {
        margin-bottom: 18px; /* max-width * 2% */
    }
}

我这样做的最大宽度为900px，这样您就可以在jsfiddle屏幕中更容易地看到它的工作方式，但很容易将其更改为原来的1400px。只需更改容器的最大宽度，并计算媒体查询中的数字，如注释中所示。或者，您可以使用像LESS这样的预处理器自动执行所有这些计算，我强烈建议您这样做。

CSS响应嵌套网格高度

1 个答案: