css3-columns多列布局_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:46:45
asal
1639 orang telah melayarinya

 1 /*css3中的布局*/ 2 .wrapper{ 3    margin:auto; 4    width:300px; 5    height:200px; 6    border:2px dotted blue; 7    -webkit-columns:15px 3;/*表示多列布局,每一列15px 有3列,内容多于3列则该参数失效!例如对一篇文章可以进行多列布局显示*/ 8       9      -webkit-column-count:3;10      -webkit-column-width:15px;/*将width和count属性拆开来单独使用,弱拆开且同时使用,浏览器根据具体情况会可能会使某一属性失效*/ 11      -webkit-column-gap:2em;/*设置列间距为2字符,不设置默认情况下为1字符间距*/    12 13     -webkit-column-rule:2px    solid red;/*定义列与列之间的分割线为2px  实体  红色 该分割线不占用空间位置 like a ghost*/14     15 }16 h2{17    text-align:center;/*文本居中显示*/18    -webkit-column-span:all;/*令h2横跨所有列*/19 }
Salin selepas log masuk

 

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan