当两个或者两个以上标签一起使用显示在同一行时，以前常用的是float、position进行布局，在高版本的浏览器可以使用flex、grid进行布局。使用display:table-cell也是一个很好用的自适应布局。

三栏布局(两侧定宽中间自适应的布局)有十种方法：

1.float+margin

原理：浮动元素脱离文档流

缺点：

• 不支持 center 部分前置，无法实现中间部分优先加载。
• left、right 的高度无法伴随 center 高度的变化而变化

<style>
        html,body{
            margin: 0;
            padding: 0;
        }
        .sider {
            width: 200px;
            height: 300px;
            background-color: lightskyblue;
        }
        .left {
            float: left;
        }
		.right {
            float: right;
            background-color: rgb(25, 196, 19);
        }
        .center {
            /* 方案一： */
            margin: 0 200px 0 200px; 
            height: 300px;
            background-color: pink;
        }
    </style>

    <div class="outer">
        <div class="sider left"></div>
        <div class="sider right"></div>
        <div class="center"></div>
    </div>

2.float+calc

<style>
        .sider {
            width: 200px;
            height: 300px;
            background-color: lightskyblue;
        }
        .left {
            float: left;
        }
        .center {
            /* 方案二： */
            float: left;
            width: calc(100% - 400px);
            height: 300px;
            background-color: pink;
        }
        .right {
            float: right;
			background-color: rgb(25, 196, 19);
        }
    </style>

	<div class="outer">
	  	<!-- 只要left在第一个，其它后面两个顺序不分前后 -->
        <div class="sider left"></div>
        <div class="center"></div>
        <div class="sider right"></div>
    </div>

3.position+margin

原理：绝对定位元素脱离文档流

优点：支持center部分前置，可以实现中间部分优先加载

缺点：left、right 的高度无法伴随 center 高度的变化而变化

	<style>
        .outer {
            position: relative;
        }
        .sider {
            position: absolute;
            top: 0;
            height: 500px;
            width: 200px;
            background-color: lightskyblue;
        }
        .left {
            left: 0;
        }
        .right {
            right: 0;
            background-color: rgb(19, 181, 100);
        }
        .center {
            margin: 0 200px 0 200px;
            height: 500px;
            background-color: pink;
        }
    </style>
  

<div class="outer">
        <div class="sider left"></div>
        <div class="center"></div>
        <div class="sider right"></div>
    </div>

4.position+left+calc

<style>
        .outer {
            position: relative;
        }
        .sider {
            position: absolute;
            top: 0;
            height: 500px;
            width: 200px;
            background-color: lightskyblue;
        }
        .left {
            left: 0;
        }
        .right {
            right: 0;
            background-color: rgb(19, 181, 100);
        }
        .center {
            position: absolute;
            left: 200px;
            width: calc(100% - 400px);
            height: 500px;
            background-color: pink;
        }
    </style>

<div class="outer">
        <div class="sider left"></div>
        <div class="center"></div>
        <div class="sider right"></div>
    </div>

5.position+left+right

<style>
       .outer {
            position: relative;
        }
        .sider {
            position: absolute;
            top: 0;
            height: 500px;
            width: 200px;
            background-color: lightskyblue;
        }
        .left {
            left: 0;
        }
        .right {
            right: 0;
			background-color: rgb(19, 181, 100);
        }
        .center {
            position: absolute;
            left: 200px;
            right: 200px;
            height: 500px;
            background-color: pink;
        }
    </style>

 <div class="outer">
        <div class="sider left"></div>
        <div class="center"></div>
        <div class="sider right"></div>
    </div>

6.flex+order+flex-grow

原理：利用了容器项目 order 属性或flex:1

order: 2; 默认值为0，order越小位置越靠前，越靠