CSS3让网页更富于表现和支持更复杂布局

要使用它，通过flow属性赋予内容的容器一个名字，这样做会将内容从普通的CSS布局流中去掉，然后你可以插入这个线程到1个或多个其他区域——使用from()作为content属性的值。

上面的三列布局的代码如下：

CSS

1
2
3
4
5
6
7

#source {
	flow: "main-thread";
}
.region {
	content: from(main-thread);
	background: #C5DFF0;
}

HTML

1
2
3
4
5
6
7

 <div id="source">
	<p>Lorem ipsum dolor [...]</p>
</div>
 
<div id="region1" class="region"></div>
<div id="region2" class="region"></div>
<div id="region3" class="region"></div>

你可以在一个页面中联合多个命名的flow。你也可以使用content-order属性来控制文字流的顺序。如果没有指定，将会使用正常的文档顺序。

通过这个简单的构件，你可以实现更复杂的布局，包括多列文本、不同宽高的列，以及跨越多个列的区域。(见图2)

图2. 文字穿越堆叠的区域和列

形状环绕(Wrap shape)

使用形状环绕，你可以控制文字经过区域的形状(见图3)。你也可以使用这个属性搭配内容流或者单独的创建更有趣的设计。

图3.文字内容显示在自定义形状的内部

要使用这个特性，你需要使用wrap-shape属性来定义形状，并设定wrap-shape-mode属性为需要的值。通过制定content的值，文字将显示在形状内部。

上面的现实心形的代码如下：

CSS

1
2
3
4
5
6
7
8
9
10
11

.circle{
/* 定义元素形状为一个圆*/
	wrap-shape: polygon(0px, 150px /* ...更多点*/);
	wrap-shape-mode: content;   
}
 
.heart{
	/* 定义元素形状为心形*/
	wrap-shape: polygon(150px, 32px /* ...更多的点 */);  
	wrap-shape-mode: content;   
}

HTML

1
2

<div class="circle"></div>
<div class="heart"></div>

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!