通栏平均分布型_h5通栏平均分布-CSDN博客

本文链接：https://blog.csdn.net/weixin_44748332/article/details/88647854

<!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>通栏平均分布型</title>
       <style>
       *{
           margin: 0;
           padding: 0;
       }
       .top{
           width:100%;
           height: 100px;
           background-color: pink;
       }
.main{
           width: 1200px;
           margin: 50px auto;
           height: 800px;
           background-color: #eee;
       }
       .main .banner{
           width: 100%;
           height: 100px;
           background-color: yellow;
       }
       .main .conter01{
           width: 100%;
           height: 270px;
           background-color: cyan;
           margin: 30px 0;
       }
       .main .conter01 div{
float: left;
width: 292px;/*(1200/3)-10*/
height: 270px;
background-color: red;
margin-right: 10px
       }
       .main .conter01 .mar,
       .main .conter02 .mar{
margin-right: 0;
float: right;
       }
       .main .conter02{
           width: 100%;
           height: 400px;
       background-color: grey;
       }

       .main .conter02 div{
float: left;
width: 292px;/*(1200/3)-10*/
height: 400px;
background-color: red;
margin-right: 10px
       }
       .footer{
width: 100%;
height: 200px;
background-color: #abcdef;
       }
       </style>
   </head>
   <body>
   <div class="top"></div>
<div class="main">
       <div class="banner"></div>
           <div class="conter01">
               <div></div>
               <div></div>
               <div></div>
               <div class="mar"></div>
           </div>
           <div class="conter02">
               <div></div>
               <div></div>
               <div></div>
               <div class="mar"></div>
           </div>
       </div>
   <div class="footer"></div>
   </body>
   </html>