栅格布局的两种简单的实现方式_html/css_WEB-ITnose

使用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       

实现效果如图所示：

当然使用table和负边距也是可以实现的，有时间补上:-D

查看更多关于栅格布局的两种简单的实现方式_html/css_WEB-ITnose的详细内容...