当前位置：煜阳网站建设 > 公司网站制作 > 前端 > CSS

columns属性怎么用？

2024-01-17 16:51 小编

　 cssccolumns属性用法

　　columns:饱含两个属性column-width，column-count

　　1.column-width列的宽度

　　2.column-count列数

　　浏览器兼容：

　　InternetExplorer10和Opera支持column属性

　　Firefox支持替代的-moz-column属性

　　Safari和Chrome支持替代的-webkit-column属性

内部绝密传真282期

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　<style>

　　p{margin:0;padding:5px10px;background:#eee;}

　　h1{margin:10px0;font-size:16px;}

　　.test1{

　　width:628px;

　　border:10pxsolid#000;

　　-moz-columns:100px4;

　　-webkit-columns:100px4;

　　columns:100px4;

　　}

　　.test2{

　　border:10pxsolid#000;

　　-moz-columns:400px;

　　-webkit-columns:400px;

　　columns:400px;

　　}

　　</style>

　　</head>

　　<body>

　　<h1>列数及列宽固定:</h1>

　　<div>

　　<p>Thismoduledescribesmulti-columnlayoutinCSS.Byusingfunctionalitydescribedinthisdocument,stylesheetslaidoutinmultiplecolumns.</p>

　　<p>OntheWeb,tableshavealsobeenusedtodescribemulti-columnlayouts.Themainbenefitofusingntoanotheronvariousoutputdevicesincludingspeech</p>

　　<p>OntheWeb,tableshavealsobeenusedtodescribemulti-columnlayouts.Themainbenefitofusingntoanotheronvariousoutputdevicesincludingspeechsynthesizersandsmallmobiledevices.</p>

　　</div>

　　<h1>列宽固定，根据内容自动分布列数:</h1>

　　<div>

　　<p>Thismoduledescribesmulti-columnlayoutinCSS.Byusingfunctionalitydescribedinthisdocument,stylesheetscandeclarethatthecontentofanelementistobelaidoutinmultiplecolumns.</p>

　　<p>OntheWeb,tableshavealsobeenusedtodescribemulti-columnlayouts.ThemainbenefitofusingCSS-basedcolumnsisflexibility;contentcanflowfromonecolumntoanother,andthenumberofcolumnscanvarydependingonthesizeoftheviewport.Removingpresentationtablemarkupfromdocumentsallowsthemtomoreeasilybepresentedonvariousoutputdevicesincludingspeechsynthesizersandsmallmobiledevices.</p>

　　</div>

　　</body>

　　</html>

Tag：怎么

返回首页上一篇：css怎么设置字体为楷体？下一篇：css是做什么的