html 2*2格子

最新推荐文章于 2022-07-24 22:42:35 发布

yangyang031213

最新推荐文章于 2022-07-24 22:42:35 发布

阅读量1.8k

点赞数

分类专栏：网页文章标签： html 2*2格子

本文链接：https://blog.csdn.net/yangyang031213/article/details/80715916

版权

网页专栏收录该内容

6 篇文章 0 订阅

订阅专栏

用表格，表格格子放div，也可以直接用div布局，但是好麻烦，不好用。。。。。。

<!DOCTYPE html>
<html>
  <head>
    <title>aaaaaaaaaaaa</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <style>
  .block{
   width:50%;
   height:50%;
  }
  .chart{
   width:100%;
   height:100%;
   background:gray;
  }
 </style>
  </head>
  <body>
 <table align="center" cellspacing="0" width="800px" height="600px">
  <tr>
   <td class="block">
    <div id="chart0" class="chart"></div>
   </td>
   <td class="block">
    <div id="chart0" class="chart"></div>
   </td>
  </tr>
  <tr>
   <td class="block">
    <div id="chart0" class="chart"></div>
   </td>
   <td class="block">
    <div id="chart0" class="chart"></div>
   </td>
  </tr>
 </table>
  </body>
</html>

效果：
这里写图片描述
全屏自适应的2*2格子：

<!DOCTYPE html>
<html width="100%" height="100%">
  <head>
    <title>aaaaaaaaaaaaaa</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <style>
        html, body {
            width: 100%;
            height: 100%;
        }
        body {
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
        }
  .block{
   width:50%;
   height:50%;
  }
  .chart{
   width:100%;
   height:100%;
   background:gray;
  }
 </style>
  </head>
  <body width="100%" height="100%">
 <table align="center" cellspacing="0" width="100%" height="100%">
  <tr>
   <td class="block">
    <div id="chart0" class="chart"></div>
   </td>
   <td class="block">
    <div id="chart0" class="chart"></div>
   </td>
  </tr>
  <tr>
   <td class="block">
    <div id="chart0" class="chart"></div>
   </td>
   <td class="block">
    <div id="chart0" class="chart"></div>
   </td>
  </tr>
 </table>
  </body>
</html>