グリッドを実装する 2 つの簡単な方法layout_html/css

グリッドを実装する 2 つの簡単な方法layout_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:48:37

オリジナル

1181 人が閲覧しました

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 属性は Google と 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>

ログイン後にコピー

効果は図に示されています:

もちろん、テーブルとネガティブマージンを使用して実現することもできます。時間があれば、それを補ってください:-D。