第28章 CSS3多列布局

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS3多列布局</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
	<h1>科技新闻总汇</h1>
	<h3>第一段内容</h3>
	<p>据市场研究机构IDC公布的最新数据，中国市场第一季度智能手机出货量较上年同比下滑4.3%，这在六年来尚属首次。其他的调查结果则显示，中国市场第一季度智能手机出货量仍处于增长，但其增幅较以往出现明显放慢。</p>	
	<h3>第二段内容</h3>
	<p>据IDC的数据，今年第一季度，三星在华市场份额已经跌到第四，而一年前还位居第一。不过，三星还是对中国市场充满希望，希望通过其高端手机产品Galaxy S6继续赢得发展。三星在一份声明中称，“虽然有迹象表明爆发式增长的中国智能市场今年将降速，但8.85亿中国手机用户中的大部分还在使用中低端智能手机，因此即便中国市场出现饱和，但升级换代还是给高端手机留下相当大的空间。”</p>
	<h3>第三段内容</h3>
	<p>业内人士称，智能手机在中国市场的发展显著减速主要是受首次购买用户减少的影响。市场研究机构Counterpoint研究总监Tom Kang表示，在中国，智能手机的渗透率已经超过90%，这意味着在中国希望使用智能手机的用户都已经实现第一次购买，现在已经进入了一个手机换代升级的时期。</p>
	<h3>第四段内容</h3>
	<p>在北京一家科技公司工作的廖先生就属于这一人群。廖先生目前使用的是苹果iPhone 6，他几乎每两年更换一部手机。但从目前的情况来看，廖先生还是比较钟情于现在使用的iPhone 6。他说：“近期内不会再购买手机，除非现在的这部手机丢了或摔坏了。我以后可能还是会买苹果的手机，如果三星能推出一款不错的手机，我也会考虑的。”</p>
	<h3>第五段内容</h3>
	<p>中国市场发展速度的减速对苹果、三星等国外智能手机制造商以及小米等本土企业将产生实质性的影响。与此同时，不管是国外厂商还是本土企业，例如联想、酷派以及华为都在中国市场投入更多力量，其中很多还专注于销售价格不断上涨的大屏智能手机。</p>
</div>
</body>
</html>

style.css

@charset "utf-8";

div {
	/*-moz-columns: auto 3;*/
	/*-moz-columns: 150px 3;*/

	/*如果没有设置列数，却设置了每列多少宽度，那么会自动设置列数*/
	-moz-column-width: 150px;
	-moz-column-count: 3;
	-moz-column-gap: 50px;
	-moz-column-rule: 2px dashed gray;

	-webkit-column-width: 150px;
	-webkit-column-count: 3;
	-webkit-column-gap: 50px;
	-webkit-column-rule: 2px dashed gray;

	column-width: 150px;
	column-count: 3;
	column-gap: 50px;
	column-rule: 2px dashed gray;
}

h1 {
	text-align: center;

	-moz-column-span: all;
	-webkit-column-span: all;
	column-span: all;

}

第28章 CSS3多列布局

猜你喜欢