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属性

 

  

  <!DOCTYPEhtml>

 

  <html>

 

  <head>

 

  <metacharset="UTF-8">

 

  <title></title>

 

  <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>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: 怎么
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码