列式布局-优快云博客

博客提及了一列式、二列式、3列式、3行3列式等内容，最后表示讲无可讲让读者自己理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1列式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>1列式布局</title>
		<style type="text/css">
			body{
				/*让整个body中的文字居中*/
					text-align: center;
			}
			.div1{
				
				border: 1px solid red;
				/* 高度不是必须的可以根据内容多少而自动适应
				 	如果宽度不设置将自动占满整个屏幕*/
				height: 586px;
				width: 586px;
				/* 给四个值分别是上右下左外边距,给两个值是,第一值上或低,第二值是,左右的外边距.给aotu则表示
				 	自动计算出左右两边相等的距离,这个设置能让div居中*/
				margin: 0px auto;
			}
			
		</style>
	</head>
	<body>
        <div class="div1">
        	我是一列式布局
        	
        </div>
       
	</body>
</html>

二列式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>2列式布局</title>
		<style type="text/css">
			.divOut{
				border: 1px solid green;
				width: 95%;
				/*让该元素居中显示*/
				margin: 0px auto;
			}
			.div1{
				border: 1px solid red;
				width: 168px;
				height: 620px;
				float: left;
			}
			.div2{
				border: 1px solid green;
				height: 620px;
				/*让其自动适应该显示多宽,此处不要浮动了*/
			}
			
		</style>
	</head>
	<body>
		<div class="divOut">
			<div class="div1">
        	
        	</div>
        	<div class="div2">
        	
        	</div>
		</div>
        
       
	</body>
</html>

3列式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>3列式布局</title>
		<style type="text/css">
			.divOut{
				position: absolute;
				border: 1px solid green;
				width: 95%;
				/*让该元素居中显示*/
				margin: 0px auto;
			}
			.div1,.div2,.div3{
				border: 1px solid red;
				height: 680px;
			}
			.div1{
				width: 182px;
				position: absolute;
				left: 10px;
				top: 0px;
			}
			.div2{
				margin-left: 186px;
				margin-right:184px ;
			}
			.div3{
				width: 180px;
				position: absolute;
				right: 10px;
				top: 0px;
			}
			
		</style>
	</head>
	<body>
		<div class="divOut">
			<div class="div1">
        	
        	</div>
        	<div class="div2">
        	
        	</div>
        	<div class="div3">
        	
        	</div>
		</div>
        
       
	</body>
</html>

3行3列式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>3列3行式布局</title>
		<style type="text/css">
			*{
				/*为了解决因为浏览器不同他们的默认值不同所以这里设置一下*/
				margin: 0px;
				padding: 0px;
				font-size: 1em;
			}
			.divOut{
				border: 1px solid green;
				width: 960px;
				margin: 0px auto;
			
			}
			.divTop{
				border: 1px solid blue;
				width: 100%;
				height: 68px;
			}
			.divMain{
				border: 1px solid red;
				height: 450px;
				
			}
			.div1{
				width: 200px;
				border: 1px solid red;
				float: left;
				height: 100%;
			}
			.div2{
				border: 1px solid blueviolet;
				width: 520px;
				float: left;
				margin: 0px 10px;
				height: 100%;
			}
			.div3{
				width: 200px;
				border: 1px solid yellow;
				float: left;
				height: 100%;
			}
			.divBott{
				width: 100%;
				height: 120px;
				border: 1px solid cyan;
			}
			
		</style>
	</head>
	<body>
		<div class="divOut">
			<div class="divTop">
        		我是标题
        	</div>
			<div class="divMain">
        		<div class="div1">
        			我是左栏
        		</div>
        		<div class="div2">
        			我是中间
        		</div>
        		<div class="div3">
        			我是右栏
        		</div>
        	</div>
        	<div class="divBott">
        		我底标
        	</div>
		</div>
        
       
	</body>
</html>

讲无可讲自己理解