页面布局

1、两列布局

左侧定宽，右侧自适应实现方法很多，我常用的float+margin+左侧设置width

//css
     .parent{
           height: 200px;border: 1px solid black;
        }
        .left{
            float: left;
            width: 200px;
            height: 100%;
            background-color: yellow;
        }
        .right{
            margin-left: 210px;
            height: 100%;
            background-color: red;
        }
//html
<div class="parent">
        <div class="left"></div>
        <div class="right"></div>
</div>

image.png

也可以使用绝对定位实现。定位几乎可以实现所有布局，但个人感觉不够灵活~

2、三列布局

两边定宽，中间自适应,

• 左右浮动+中间margin实现

//css
  .parent{
        height: 200px;border: 1px solid black;
    }
    .left{
        float: left;
        width: 200px;height: 100%;
        background-color: red;
    }
    .right{
        float: right;
        width: 200px;height: 100%;
        background-color: yellow;
    }
    .middle{
        height: 100% ;
        margin-left: 210px;margin-right: 210px;
        background-color: pink;
    }
//html
<div class="parent">
       <div class="left"></div>
       <div class="right"></div>
       <div class="middle"></div>
   </div> 

三列布局

当宽度小于left+right的宽度时，右侧会被挤掉下去，最好给页面一个min-width.

• 也可以使用定位实现

//css
  .parent{
        position: relative;
        height: 200px;border: 1px solid black;
    }
    .left{
        position: absolute;left: 0;top: 0;
        width: 200px;height: 100%;background-color: red;
    }
    .middle{
        margin-left: 210px;margin-right: 210px;height: 100%;
        background-color: pink;
    }
    .right{
        position: absolute;right: 0;top: 0;
        width: 200px;height: 100%;background-color: yellow;
    }
//html
<div class="parent">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
</div>