Two simple ways to implement grid layout_html/css

Two simple ways to implement grid layout_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:48:37

Original

1181 people have browsed it

Use 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>

Copy after login

Use display: flex (this css3 attribute Only supported by Google and Firefox)

<!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>

Copy after login

The effect is as shown in the figure:

Of course, it can also be achieved using table and negative margins. If you have time, make up for it:-D