Html 响应性网格布局-仪表板风格-100%高度;宽度容器
我希望这是一个纯响应css网格的11个html divHtml 响应性网格布局-仪表板风格-100%高度;宽度容器,html,css,responsive-design,grid-layout,Html,Css,Responsive Design,Grid Layout,我希望这是一个纯响应css网格的11个html div <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
<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-->
w100%,h100%
w20%,h25%
w20%,h25%
w20%,h25%
w20%,h25%
w35%,h30%
w30%,h65%
w15%,h90%
w35%,h35%
w65%,h15%
w65%,h20%
w15%,h10%
在容器宽度为100%、高度为100%的情况下响应
..每个框占页面容器的百分比
我们一直在努力,但尚未使浮子正常工作。。感谢您对此提供的任何帮助此解决方案使用浮点数 我必须交换框的顺序,并在原始HTML标记中添加2个容器 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-->
想知道你是否会看一看这个,真的很感谢风景画。。
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;
}