2种栅格布局的简单实现方式.docx
文本预览下载声明
PAGE
PAGE 1
2种栅格布局的简单实现方式
一、用法float： 复制代码 代码如下: section { border: solid 1px; } section section { float: left; margin-left: 10px; margin-top: 10px; text-align: center; width: 200px; border-radius: 20px; height: 200px; } .parent { height: 440px; width: 660px; } .parent section:first-child { height: 410px; } A B C D E 二、用法display：flex（这个css3属性仅谷歌和火狐支持） 复制代码 代码如下: section { border: solid 1px; } section section { margin-left: 10px; margin-top: 10px; text-align: center; width: 200px; border-radius: 20px; height: 200px; } .parent { display: flex; flex-direction: column; flex-wrap: wrap; height: 440px; width: 660px; } .parent section:first-child { height: 410px; } A B C D E
显示全部