div布局、table布局、flex布局、多列布局、网格布局 示例

目录

基础代码

demo.html

css/common.css

div实用布局示例

代码

效果图

table布局

代码

效果图

flex布局

代码

效果图

多列布局

代码

效果图

网格布局

代码

效果图

---

基础代码

demo.html
 

css/common.css

html,
body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background: #fff;
	color: #000;

}

.wrapper {
	width: 100%;
	margin-bottom: 50px;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

h1,
h2,
h3,
h4{
	text-align: center;
	margin:5px 0;
	padding:0;
}

h1{
	font-size: 32px;
}
h2{
	font-size: 26px;
}
h3{
	font-size: 20px;
}
h4{
	font-size: 14px;
}

div实用布局示例

代码

	
实用布局示例
	
左边固定、右边自适应
	
方案一：绝对定位 + 外边距
	
	

		

		

	
	
	
方案二：浮动定位。
	
	

		

		

	
	
	
右边固定、左边自适应
	
方案一：绝对定位 + 外边距
	
	

		

		

	
	
说明：文档流中右边固定div放在左边自适应div前面，使右边固定div绝对定位时参照父元素定位，而非参照左边自适应div定位【会导致换行】。

	
左边固定、右边固定、中间自适应
	
方案一：浮动定位 + 外边距
	
	

		

		

		

	
	
说明：文档流中左边固定div设置向左浮动，文档流中右边固定div设置向右浮动，通过给中间部分设置左右外边距来避免重叠。
	
	
顶部固定、底部固定、中间自适应
	
方案一：绝对定位
	
	

		

		

		

	
	
	
方案二：calc函数计算
	
	

		

		

		

	
	
	
底部栏靠底显示
	
方案一：最小高度 + 绝对定位 + 内边距
	
	

		

		

			content
		
		

	

效果图

 

table布局

代码

	
实用布局示例
	
html table标签 斑马纹
	
	

		

			原生html表格标签布局 示例
		
		

			

				
id
				
字段一
				
字段二
				
字段三
				
操作选项
			
		
		

			

				
1001
				
测试文本1
				
测试文本2
				
测试文本3
				
编辑删除
			
			

				
1002
				
测试文本1
				
测试文本2
				
测试文本3
				
编辑删除
			
			

				
1003
				
测试文本1
				
测试文本2
				
测试文本3
				
编辑删除
			
			

				
1004
				
测试文本1
				
测试文本2
				
测试文本3
				
编辑删除
			
			

				
1005
				
测试文本1
				
测试文本2
				
测试文本3
				
编辑删除
			
			

				
1006
				
测试文本1
				
测试文本2
				
测试文本3
				
编辑删除
			
		
		

			

				
信息说明
				
测试提示文本，提示文本，提示文本。
			
			
		
	
	
	
div + css 表格 斑马纹
	
	

		

			div + css 实现表格布局 示例
		
		

			

				
id
				
字段一
				
字段二
				
字段三
				
操作选项
			
		
		

			

				
1001
				
测试文本1
				
测试文本2
				
测试文本3
				
编辑删除
			
			

				
1002
				
测试文本1
				
测试文本2
				
测试文本3
				
编辑删除
			
			

				
1003
				
测试文本1
				
测试文本2
				
测试文本3
				
编辑删除
			
			

				
1004
				
测试文本1
				
测试文本2
				
测试文本3
				
编辑删除
			
			

				
1005
				
测试文本1
				
测试文本2
				
测试文本3
				
编辑删除
			
			

				
1006
				
测试文本1
				
测试文本2
				
测试文本3
				
编辑删除
			
		
		

			

				
信息说明
				
测试提示文本，提示文本，提示文本。
			
		
	
	
说明：本实例并没有真正实现跨列功能。对于div表格布局，想要真正实现跨行跨列的效果，如果通过内嵌表格【display:table】的方式来实现，要注意最外层表格中一行中只有一个单元格以方便布局，否则因为display:table;布局会自动补上缺失的表格元素，导致tr中嵌套的div会被视作一个单元格，宽度受限【width:100%;也只是占据一个单元格宽度，而非占用一行宽度】。如果表格数据简单，又需要实现一些信息跨行跨列展示，那么就可以先考虑使用html table标签表格来展示数据。

效果图

 

flex布局

代码

	
实用布局示例
	
页面主体布局
	
	

		

			
logo
			
menu
			
icons
		
		

			

				left-bar
			
			

				main
			
		
		

			footer
		
	

效果图

多列布局

代码

	
实用布局示例
	
文章多列展示
	
	

		
测试文本1，测试文本1，测试文本1，测试文本1，测试文本1，测试文本1，测试文本1测试文本1，测试文本1测试文本1，测试文本1测试文本1，测试文本1测试文本1测试文本1，测试文本1测试文本1测试文本1，测试文本1测试文本1测试文本1测试文本1测试文本1测试文本1。
		
测试文本2，测试文本2，测试文本2，测试文本2，测试文本2，测试文本2，测试文本2测试文本2，测试文本2测试文本2，测试文本2测试文本2，测试文本2测试文本2测试文本2，测试文本2测试文本2测试文本2，测试文本2测试文本2测试文本2测试文本2测试文本2测试文本2。
	
	
	
瀑布流分列展示内容盒，内容盒不断开
	
	

		

			

				测试文本，测试文本，测试文本，测试文本。
			
		
		

			

				测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本。
			
		
		

			

				测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本。
			
		
		

			

				测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本。
			
		
		

			

				测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本。
			
		
		

			

				测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本。
			
		
	

效果图

 

网格布局

代码

	
实用布局示例
	
水平、垂直居中对齐
	
	

		display:grid;
		place-items:center;
	

	
跨行跨列网格布局
	
	

		
box1
		
box2
		
box3
		
box4
		
box5
	

效果图