| 标题 | CSS多列布局实现方法大全 |
| 内容 | 摘要： 多列布局在网站应用中也是经常见到的，今天就分享4中多列布局。 display:table 代码如下: <style> .table { width: auto; min-width: 1000px; margin: 0 auto; padding: 0; display:table; } .tableRow { display: table-row; } .tableCell { border: 1px solid red; display: table-cell; width: 33%; } </style> <div > <div > <div > one </div> <div > two </div> <div > three </div> </div> </div> float 代码如下: <style> .row { float: left; width: 33%; border: 1px solid red; } </style> <div > one </div> <div > two </div> <div > three </div> display: inline-block 代码如下: <style> .row { display: inline-block; width: 32%; border: 1px solid red; } </style> <div > one </div> <div > two </div> <div > three </div> column-count 代码如下: <style> .column { /* 设置列数 */ -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; /* 设置列之间的间距 */ -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; /* 设置列之间的规则 */ -moz-column-rule:4px outset #ff0000; /* Firefox */ -webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */ column-rule:4px outset #ff0000; } </style> <div></div> 小结： 以上代码都是在chrome上测试，如果使用请注意兼容性，有任何问题都可以提问 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。