响应式网格布局 - 仪表盘样式 - 100％高度和宽度容器

Question

响应式网格布局 - 仪表盘样式 - 100％高度和宽度容器

4

我希望你能将这11个html div变成一个纯响应式的css网格。 enter image description here

<div class="dashboard page-container">w100%, h100%
    <div class="box1">w20%, h25%</div>
    <div class="box2">w20%, h25%</div>
    <div class="box3">w20%, h25%</div>
    <div class="box4">w20%, h25%</div>
    <div class="box5">w35%, h30%</div>
    <div class="box6">w30%, h65%</div>
    <div class="box7">w15%, h90%</div>
    <div class="box8">w35%, h35%</div>
    <div class="box9">w65%, h15%</div>
    <div class="box10">w65%, h20%</div>
    <div class="box11">w15%, h10%</div>
</div><!--/dashboard-->

在容器宽度为100％和高度为100％的情况下，响应式指的是每个方框都是页面容器的一个百分比。我一直在努力解决这个问题，但还没有正确地使浮动起作用。非常感谢您的帮助。

- StackThis

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- web-tiki · Accepted Answer

这个解决方案使用浮动。

代码演示

我需要交换盒子的顺序，并在原始HTML标记中添加两个容器。

HTML：

<div class="dashboard page-container">
    <div class="col1">
        <div class="box1">w20%, h25%</div>
        <div class="box2">w20%, h25%</div>
        <div class="box3">w20%, h25%</div>
        <div class="box4">w20%, h25%</div>
    </div>
    <div class="col2">
        <div class="box6">w30%, h65%</div>
        <div class="box5">w35%, h30%</div>
        <div class="box8">w35%, h35%</div>
        <div class="box9">w65%, h15%</div>
        <div class="box10">w65%, h20%</div>
    </div>
    <div class="box7">w15%, h90%</div>
    <div class="box11">w15%, h10%</div>
</div><!--/dashboard-->

CSS：层叠样式表。

html, body, .dashboard {
    width:100%;
    height:100%;
    margin:0;
}
.col1, .col2, .box7, .box11 {
    float:left;
}
.col1 {
    width:20%;
    height:100%;
}
.col1 > div {
    width:100%;
    height:25%;
}
.col2 {
    width: 65%;
    height:100%;
}
.box6 {
    float:right;
    width: 47.5%;
    height:65%;
}
.box5, .box8 {
    width:52.5%;
}
.box5 {
    height:30%;
}
.box8 {
    height:35%;
}
.box9 {
    height:15%;
}
.box10 {
    height:20%;
}
.box7, .box11 {
    width:15%;
}
.box7 {
    height:90%;
}
.box11 {
    height:10%;
}
/* following just to see what we are doing :) */
 div {
    border:2px solid red;
    box-sizing:border-box;
}