栅格布局的两种简单的实现方式

2024-04-27 14:28:46

字体：大中小

来源：转载

供稿：网友

栅格布局的两种简单的实现方式

使用float：

<!DOCTYPE html><html><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title></title>  <style>      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;      }  </style></head><body>  <section class="parent">    <section>A</section>    <section>B</section>    <section>C</section>    <section>D</section>    <section>E</section>  </section></body></html>

使用display：flex（这个CSS3属性仅谷歌和火狐支持）

<!DOCTYPE html><html><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title></title>  <style>      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;      }  </style></head><body>  <section class="parent">    <section>A</section>    <section>B</section>    <section>C</section>    <section>D</section>    <section>E</section>  </section></body></html>

实现效果如图所示：