Html 响应网格布局纵向方向仪表板100%h&；w CSS？

我有一个用于

@media（方向：横向）{

的仪表板，我想制作一个

@media（方向：纵向）{

版本

这里是风景：

这是肖像的网格：

我认为它可能类似于第1行（100%w，20%h）和第2行（100%w，80%h），但我想知道如何在第二行进行正确的浮动

<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>

“w:25%；h:20%；
w:25%；h:20%；
w:25%；h:20%；
w:25%；h:20%；
“w:45%；h:20%；
“w:45%；h:30%；
“w:40%；h:50%；
w:85%；h:12.5%；
w:85%；h:17.5%；
w:15%；h:70%；
“w:15%；h:10%；

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

.col2

中元素的高度/宽度可能需要进行一些调整，以精确匹配所需的高度/宽度

CSS:

---

这里的问题是确定哪个盒子从横向到纵向。你能在你的纵向网格表示中添加盒子的编号吗？@web tiki刚刚在网格图像中添加了盒子的名称。非常感谢你再看一次谢谢！太棒了，太棒了

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;
}