响应式网格布局纵向方向仪表板100％h＆amp; w CSS？

Question

我有@media (orientation: landscape) {的信息中心，我想制作@media (orientation: portrait) {版本的..

以下是景观：http://jsfiddle.net/FhKEx/

这是肖像的网格：

认为它会像第1行（100％w，20％h）和第2行（100％w，80％h），但我想知道如何在第二行制作正确的浮点数。< / p>

<div class="dashboard">
    <div class="row1">
        <div class="box1">"w:25%; h:20%;</div>
        <div class="box2">w:25%; h:20%;</div>
        <div class="box3">w:25%; h:20%;</div>
        <div class="box4">w:25%; h:20%;</div>
    </div>
    <div class="row2">
        <div class="box5">"w:45%; h:20%;</div>
        <div class="box8">"w:45%; h:30%;</div>
        <div class="box6">"w:40%; h:50%;</div>
        <div class="box9">w:85%; h:12.5%;</div>
        <div class="box10">w:85%; h:17.5%;</div>
        <div class="box7">w:15%; h:70%;</div>
        <div class="box11">"w:15%; h:10%;</div>
    </div>
</div>

Answer 1

好的，我设法让它们像你的图像一样浮动而不会改变HTML标记。

.col2中元素的高度/宽度可能需要稍微调整才能达到所需的高度/宽度。

<强> FIDDLE

CSS：

html,body,.dashboard{
    width:100%;
    height:100%;
    margin:0;
}

.col1{
    width:100%;
    height:20%;
}
.col1 > div{
    width:25%;
    height:100%;
    float:left;
}
.col2{
    width: 85%;
    height:80%;
    float:left;
}
.col2 > div{
    float:left;
}
.col2 .box6{
    float:right;
    width: 45%;
    height:70%;
}
.box5,.box8{
    width:55%;
}
.box5{
    height:30%;
}
.box8{
    height:40%;
}
.box9{
    height:12%;
    width:100%;
}
.box10{
    height:18%;
    width:100%;
}
.box7,.box11{
    width:15%;

}
.box7{
    height:70%;
    width:15%;
    float:left;
}
.box11{
    height:10%;
    width:15%;
    float:left;
}

.border {
  background-color: white;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  border:1px solid #000;
}