xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

CSS3 多列布局 All In One

CSS3 多列布局 All In One

CSS Multi-column Layout Module

W3C Candidate Recommendation 12 April 2011

https://www.w3.org/TR/css3-multicol/

https://github.com/w3c/html/issues/587

CSS3 多列属性

下表列出了所有 CSS3 的多列属性：

属性描述
column-count 指定元素应该被分割的列数。
column-fill 指定如何填充列
column-gap 指定列与列之间的间隙
column-rule 所有 column-rule-* 属性的简写
column-rule-color 指定两列间边框的颜色
column-rule-style 指定两列间边框的样式
column-rule-width 指定两列间边框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的宽度
columns 设置 column-width 和 column-count 的简写

 

 

1

1

demo：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3-Multi-column</title>
	<style>
		img{
			width: 100px;
			height: 100px;
		}
		.table{
			margin: 5px;
			border: 5px solid green;
		}
		.table tr{
			margin: 5px;
			border: 3px solid blue;
		}
		.table td{
			margin: 5px;
			border: 1px dashed red;
			width: 100px;
			height: 100px;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div class="div-multi-columns">
		<!-- <img src="../../images/icon.png" alt="icon.png" title="icon.png"> -->
	</div>
	<table cellspacing="3" cellpadding="2" contenteditable="" contextmenu="" class="table">
		<thead>
			<tr>
				<td>thead-td</td>
				<td>thead-td</td>
				<td>thead-td</td>
			</tr>
		</thead>
		<tbody>
			<caption>caption</caption>
			<tr>
				<td>
					<img src="../../images/icon.png" alt="icon.png" title="icon.png">
				</td>
				<td>
					ppppppppppppppppppppppppppppppppp<br>
					ppppppppppppppppppppppppppppppppp<br>
					ppppppppppppppppppppppppppppppppp<br>
				</td>
				<td>
					ppppppppppppppppppppppppppppppppp<br>
					ppppppppppppppppppppppppppppppppp<br>
					ppppppppppppppppppppppppppppppppp<br>
				</td>
			</tr>
			<tr>
				<td>
					?? Are you ready? Special announcement: Write code for a real autonomous vehicle & learn from top industry partners!<br> 
				</td>
				<td>
					?? Are you ready? Special announcement: Write code for a real autonomous vehicle & learn from top industry partners!<br> 
				</td>
				<td>
					?? Are you ready? Special announcement: Write code for a real autonomous vehicle & learn from top industry partners!<br>
				</td>
			</tr>
		</tbody>
	</table>
	<!--  -->
</body>
</html>

 

refs

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

posted @ 2016-09-14 18:24  xgqfrms  阅读(24)  评论(2)  编辑  收藏  举报