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

WBOY
풀어 주다: 2016-06-24 11:46:45
원래의
1642명이 탐색했습니다.

 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 }
로그인 후 복사

 

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿