1:如果需要调整分栏数量,那么只需要删除对应数据,修改百分比即可.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" lang="less" >
body{
margin: 0px ;
}
.box_parent{
min-width: 1000px ;
min-height: 600px;
width: 100%;
height: calc(100vh - 0px);
.box{
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
letter-spacing:0px;
background-color: #9e9e9e38;
height: 100%;
width: 100%;
display: flex;
box-sizing: border-box;
padding: 7px;
.box_left{
height: calc(100% );
display: flex;
flex-direction:column;
width: 20%;
}
.box_center{
height: calc(100%);
display: flex;
flex-direction:column;
width: 60%;
}
.box_right{
height: calc(100%);
display: flex;
flex-direction:column;
width: 20%;
}
.item_box{
height: calc(25%);
margin: 7px;
box-sizing: border-box;
border-radius: 5px;
background-color: #ffffff;
padding: 10px;
.box_content{
box-sizing: border-box;
height: 100%;
display: block;
background-color: aliceblue;
overflow: auto;
}
}
.item_box_70{
height: calc(65%);
}
.item_box_30{
height: calc(35% );
}
}
}
</style>
</head>
<body>
<div class="box_parent">
<div class="box">
<div class="box_left">
<div class="item_box" >
<div class="box_content">
111
</div>
</div>
<div class="item_box" >
<div class="box_content">
11111
</div>
</div>
<div class="item_box" >
<div class="box_content">
11111
</div>
</div>
<div class="item_box" >
<div class="box_content">
11111
</div>
</div>
</div>
<div class="box_center" >
<div class="item_box item_box_70">
<div class="box_content">
11111
</div>
</div>
<div class="item_box item_box_30">
<div class="box_content">
11111
</div>
</div>
</div>
<div class="box_right" ">
<div class="item_box" >
<div class="box_content">
11111
</div>
</div>
<div class="item_box" >
<div class="box_content">
11111
</div>
</div>
<div class="item_box" >
<div class="box_content">
11111
</div>
</div>
<div class="item_box" >
<div class="box_content">
11111
</div>
</div>
</div>
</div>
</div>
</body>
</html>
