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>
