统计页面左右+上下自适应布局

java-wujun

已于 2023-07-17 09:34:10 修改

阅读量601

点赞数

文章标签： css javascript css3 java

于 2023-07-14 12:28:38 首次发布

本文链接：https://blog.csdn.net/qq_32091599/article/details/131720532

版权

该代码示例展示了如何使用CSSFlexbox创建一个三栏布局，包括左侧20%、中间60%和右侧20%的区域。每个栏都有可调整高度的子项，适用于网页设计中的响应式布局。通过修改百分比，可以轻松调整各栏的宽度。

摘要由CSDN通过智能技术生成

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>