两栏，三栏布局，圣杯、双飞翼布局

1、两栏布局

左侧固定，右侧自适应

• css 样式

.box{
display: flex;
width: 100%;
height: 500px;
}
.left{
width: 200px;
height: 100%;
background-color: blue;
}
.right{
width: calc(100% - 200px);
height: 100%;
background-color: red;
}

• html 代码

	<div class="box">
        <div class="left"></div>
        <div class="right"></div>
	</div>

或者是使用浮动

• css 样式

 .box{
        width: 100%;
        height: 500px;
    }
    .left{
        float: left;
        width: 200px;
        height: 100%;
        background-color: blue;
    }
    .right{
        height: 100%;
        background-color: red;
        overflow: hidden;
    }

• html

	 <div class="box">
        <div class="left"></div>
        <div class="right"></div>
     </div>

三栏布局

左右浮动，中间自适应，注意center和自要写在最下边，这样的话左右浮动不占位，中间盒子会自动顶上去

css

.box{
        width: 100%;
        height: 500px;
    }
    .left{
        float: left;
        width: 200px;
        height: 100%;
        background-color: blue;
    }
    .center{
        height: 100%;
        overflow: hidden;
        background-color: wheat;
    }
    .right{
        width: 200px;
        height: 100%;
        background-color: red;
        float: right;
    }

	<div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>

圣杯布局

布局要求

• top和btn各自占领屏幕所有宽度，高度固定。
• 中间的box是一个三栏布局。
• 三栏布局两侧宽度固定不变，中间部分自动填充整个区域。

.box{
        width: 100%;
        height: 500px;
    }
    .left{
        float: left;
        width: 200px;
        height: 100%;
        background-color: blue;
    }
    .center{
        height: 100%;
        overflow: hidden;
        background-color: wheat;
    }
    .right{
        width: 200px;
        height: 100%;
        background-color: red;
        float: right;
    }
    .top,.btn{
        line-height: 60px;
        background-color: yellowgreen;
        text-align: center;
    }

	<div class="top">这是上边</div></div>
	    <div class="box">
	        <div class="left"></div>
	        <div class="right"></div>
	        <div class="center"></div>
	    </div>
    <div class="btn">这是下边</div>