两栏布局和三栏布局

两栏布局和三栏布局

两栏布局

<div class="wrapper">
        <div class="left">我是文字测试君</div>
        <div class="right">我是文字测试君</div>
</div>

1.浮动方法float

给固定宽度的一方设置浮动，给自适应的一方设置100%宽度值，用浮动控制左右宽固固定或自适应

<style>
        .left {
            float: right/left;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
        .right {
            width: 100%;
            height: 200px;
            background-color: green;
            /*margin-left: 200px;实测此项加不加不影响*/
        }
</style>

IE8及以下不支持

2.定位方法position

如果是左侧固定右侧自适应，给父级position: relative;给固定宽度的一方position: absolute;

<style>
        .wrapper {
            position: relative;
        }
        
        .left {
            position: absolute;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: red;
            opacity: 0.5;
        }
        
        .right {
            width: 100%;
            height: 200px;
            background-color: green;
            margin-left: 200px;/*必须有*/
        }
    </style>

如果是右侧固定左侧自适应，给父级position: relative;给自适应的一方position: absolute;给固定宽度的一方添加float: right;

<style>
        .wrapper {
            position: relative;
        }
        
        .left {
            float: right;
            width: 200px;
            height: 200px;
            background-color: red;
            opacity: 0.5;
        }
        
        .right {
            position: absolute;
            right: 0;
            width: 100%;
            height: 200px;
            background-color: green;
            margin-right: 200px;
        }
</style>

3.使用表格布局

4.使用calc()函数

5.使用弹性盒子flex

方法一：给父级添加display: flex; justify-content: space-between;

通过调整HTML页面结构来控制左右固定或自适应，或调整项目的排列顺序或调整主轴的排列方向

方法二：给父级添加display: flex;给固定项目添加flex:0 0 200px;给自适应项目添加flex: 1;

三栏布局

圣杯布局/双飞翼布局 => 左右定宽，中间自适应

答：左右指定宽度并且浮动到相应位置，中间宽度设置为100%,容器水平居中左右margin: 100px; ，左右调整margin为负值。

1.浮动方式float

<div class="wrapper">
        <div class="left"></div>
        <div class="conter"></div>
        <div class="right"></div>
</div>

<style>
        .wrapper {
            margin: 0 100px;
        }
        .conter,
        .left,
        .right {
            height: 100px;
            opacity: 0.5;
        }
        .conter {
            background-color: red;
            width: 100%;
            float: left;
        }
        .left {
            width: 100px;
            background: green;
            float: left;
            margin-left: -100px;
        }
        .right {
            width: 100px;
            background: yellow;
            float: right;
            margin-right: -100px;
        }
</style>

2.利用css3计算公式 calc 动态计算中间元素宽度

.center {/*不兼容IE9以下，也不建议使用*/
	width: calc(100% - 400px);
	background: red;
}

3.利用flex布局

<style>
        .wrapper {
            display: flex;
            justify-content: space-between;
        }
        .conter,
        .left,
        .right {
            height: 100px;
            opacity: 0.5;
        }
        .conter {
            background-color: red;
            flex: 1;
        }
        .left,
        .right {
            flex: 0 0 100px;
            width: 100px;
            background: green;
        }
</style>

4.利用定位position

中间宽度设为100%居中且两边margin空出位置，左右两边定位到相应位置上