一、Flex布局

<div class="container">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>

.container {
    display: flex;
}
.left {
    width: 100px;
    background-color: aqua;
}
.right {
    width: 200px;
    background-color: bisque;
}
.middle {
    flex: 1;
    background-color: blue;
}

二、Grid 布局

<div class="container">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>

.container {
    display: grid;
    grid-template-columns: 100px auto 200px;
}
.left {
    background-color: aqua;
}
.right {
    background-color: bisque;
}
.middle {
    background-color: blue;
}

三、Table布局

<div class="container">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>

.container {
    display: table;
    /* 这里要注意设置父容器宽度 */
    width: 100%;
}
.container>div{
    display: table-cell;
}
.left {
    width: 100px;
    background-color: aqua;
}
.right {
    width: 200px;
    background-color: bisque;
}
.middle {
    background-color: blue;
}

四、浮动 + margin 布局

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <!-- 注意这里把之间元素放在下面 -->
    <div class="middle">middle</div>
</div>

.left {
    width: 100px;
    float: left;
    background-color: aqua;
}
.right {
    width: 200px;
    float: right;
    background-color: bisque;
}
.middle {
    background-color: blue;
    margin-left: 100px;
    margin-right: 200px;
}

五、浮动 + BFC

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <!-- 注意这里把之间元素放在下面 -->
    <div class="middle">middle</div>
</div>

.left {
    width: 100px;
    float: left;
    background-color: aqua;
}
.right {
    width: 200px;
    float: right;
    background-color: bisque;
}
.middle {
    background-color: blue;
    overflow: hidden;
}

六、定位布局

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <!-- 注意这里把之间元素放在下面 -->
    <div class="middle">middle</div>
</div>

.container {
    position: relative;
}
.left {
    position: absolute;
    left: 0;
    width: 100px;
    background-color: aqua;
}
.right {
    position: absolute;
    right: 0;
    width: 200px;
    background-color: bisque;
}
.middle {
    margin-left: 100px;
    margin-right: 200px;
    background-color: blue;
}

七、圣杯布局

<div class="container">
    <!-- 这里注意把中间元素放在前面，让主要内容先渲染 -->
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.container {
    padding-left: 100px; 
    padding-right: 200px;
}
.container>div {
    float: left;
}
.left {
    width: 100px;
    margin-left: -100%;
    position: relative;
    left:-100px;
    background-color: aqua;
}
.right {
    width: 200px;
    margin-right: -200px;
    background-color: bisque;
}
.middle {
    width:100%;
    background-color: blue;
}

八、双飞翼

<div class="container">
    <!-- 双飞翼与圣杯区别这里加了一层 -->
    <div class="middle">
        <div class="middle_inner">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.container>div {
    float: left;
    height: 100px;
}
.left {
    width: 100px;
    margin-left: -100%;
    background-color: aqua;
}
.right {
    width: 200px;
    margin-left: -200px;
    background-color: bisque;
}
.middle {
    width:100%;
    background-color: blue;
}
.middle_inner {
    margin-left: 100px;
    margin-right: 200px;
    background-color: red;
}