web 两列布局

最新推荐文章于 2024-10-30 12:01:39 发布

原创最新推荐文章于 2024-10-30 12:01:39 发布 · 907 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

WEB 专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>布局</title>
   <style>
       body{margin:0;padding:0}
       .main{
           width: 800px;
           margin: 0 auto;
       }
       .left{
           /*width:20%;*//*自适应宽度布局*/
           width:220px; /*固定宽度布局*/
           height:500px;
           float:left;
           background: orange;
       }
       .right{
           /*width: 80%;*//*自适应宽度布局*/
           width:580px; /*固定宽度布局*/

height: 500px;
           float: right;
           background: greenyellow;
       }
   </style>
   </head>
   <body>
       <div class="main"> 
       <div class="left"></div>
       <div class="right"></div>
       </div>
   </body>
</html>