CSS3快速上手之16：column

最新推荐文章于 2024-04-20 17:24:05 发布

Owen的Blog

最新推荐文章于 2024-04-20 17:24:05 发布

阅读量309

点赞数

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/u011775523/article/details/52781942

版权

HTML 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

CSS

22 篇文章 0 订阅

订阅专栏

1.代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>网页title</title> 
<style> 
.newspaper1
{
	/*---将 div 元素中的文本分为 3 个column---*/
	-moz-column-count:3; /* Firefox */
	-webkit-column-count:3; /* Safari and Chrome */
	column-count:3;
	
	/*---column与column间的间隙为 40 像素---*/
	-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;

	/*---指定了column与column间的边框样式---*/	
	-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;

	/*---指定column的边框厚度---*/		
	-webkit-column-rule-width: 5px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 5px; /* Firefox */
    column-rule-width: 5px;

	/*---指定column的边框颜色---*/	
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
	
}


/*---指定 h1 元素跨越所有column---*/
h1
{
	column-span:all;
	-webkit-column-span:all; /* Safari and Chrome */
}

/*---指定每个column的宽度---*/
.newspaper2
{	
	-webkit-column-width:100px; /* Safari and Chrome */
	-moz-column-width:100px; /* Firefox */
	column-width:100px;
}

</style>
</head>
<body>

<h1>范例1：固定拆分的column数量与相关格式与颜色参数</h1>
<div class="newspaper1">
CSS frameworks are pre-prepared software frameworks that are meant to allow for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and unobtrusive. This differentiates these from functional and full JavaScript frameworks.
</div><br>

<h1>范例2：指定每个column的宽度并进行拆分</h1>
<div class="newspaper2">
CSS frameworks are pre-prepared software frameworks that are meant to allow for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and unobtrusive. This differentiates these from functional and full JavaScript frameworks.
</div>


</body>
</html>

2.结果：