两栏布局，三栏布局

两栏布局：窗口被分为左右两个部分，一部分为宽度固定，高度自适应。一部分为宽度高度都是自适应。如下：左边为固定宽度，右边为自适应

方法一

<style>
        *{margin: 0;
        padding: 0;
        }
        html,body{
            height:100%;
        }
        .box1{
            width:500px;
            height:100%;
            background-color: blue;
            float: left;
        }
        .box2{
            height:100%;
            background-color: brown;
            margin-left: 500px;
        }

    </style>

方法二

  *{margin: 0;
        padding: 0;
        }
        html,body{
            height:100%;
        }
        .box1{
            width:500px;
            height:100%;
            background-color: blue;
           float: left; 
        }
        .box2{
            height:100%;
            background-color: brown;
            width:calc(100% - 500px);
            float: left;
        }

calc()函数（注意减号前后必须要有空格）

三栏布局：窗口被分为左右中间三个部分，左右固定，中间自适应

方法一

<style>
        *{margin: 0;
        padding: 0;
        }
        html,body{
            height:100%;
        }
        .left,.right{
            width:500px;
            height:100%;
            background-color: blue;
          
        }
        .center{
            height:100%;
            background-color: brown;
            margin-left: 150px;
            margin-right: 150px;
         }
         .left{float: left;}
         .right{float: right;}

    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
    <!-- 如果三个盒子顺序为left,center,right会导致right在第二行有浮动，
        因为浮动会按照排列顺序进行在left 浮动之后center会见缝插针排列在left的右边，
    但center是块元素独占一行，那么right就不能在同一行显示-->
</body>

方法二

*{margin: 0;
        padding: 0;
        }
        html,body{
            height:100%;
        }
        .left,.right{
            width:500px;
            height:100%;
            background-color: blue;
          
        }
        .center{
            height:100%;
            background-color: brown;
            width: calc(100% - 1000px);
            float: left;
         }
         .left{float: left;}
         .right{float: right;}

 

posted @ 2023-10-14 01:57  故塔拉黑暗之神  阅读(46)  评论(0)    收藏  举报