经典左右布局的样式

---------X轴可带滚动条三段身布局------------------------------

*{margin: 0; padding: 0;}

html,body{width: 100%;height: 100%;}
.header{width: 100%; height: 80px; border: solid 1px #ccc;margin:0;}
.body>.nav{width: 200px; position:absolute;top:80px;left: 0;bottom:0;}

.body>.homeCont{position:absolute;top:80px;left: 200px;bottom:0;right: 0;overflow:auto;}

---------两列布局--------------------------------

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .box{
                width: 100%;height: 500px;
            }
            .left{
                width: 100px;height: 100%;float:left;background-color: skyblue;
            }
            .right{

                  width:100%;height: 100%;background-color:red;

                   //margin-left:120px; 

         }

        </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div> 
            <div class="right"></div>
        </div>
    </body>

</html>

------------------------三列布局--------------------------

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            *{
                margin: 0;padding: 0;
            }
            .box{
                width: 100%;height: 500px;
            }
            .left{
                width: 100px;height: 100%;float:left;background-color: skyblue;
            }
            .right{
                 width: 100px;height: 100%;float:right;background-color: skyblue;
            }
            .main{
               height: 100%; background-color: red;margin:0 100px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div> 
            <div class="right"></div>
            <div class="main"></div>  //注意 中间盒子放最后
        </div>
    </body>
</html>

发布了27 篇原创文章 · 获赞 2 · 访问量 1万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览