实现三列布局，中间自适应，两边等宽 - 圣杯布局

面试中常常会被问到中间自适应，两边等宽的布局如何实现的问题，今天带大家用圣杯布局实现一下，另外想用到双飞翼布局去达到同样效果的可以参考我写的下一篇文章！

---

实现圣杯布局

1. 父盒子padding

2. 三个div浮动

3. 左右盒子相对定位并且负边距

---

下面带大家简单实现一下

div布局（示例）：

注意： 中间盒子结构放在最前边

    <div class="container">
        <div class="center">中间div</div>
        <div class="left">左边div</div>
        <div class="right">右边div</div>
    </div>
   

css样式（示例）：

        .container {
            height: 500px;
            padding-left: 200px;
            padding-right: 300px; 
            
        }

        .left {
            height: 100%;
            width: 200px;
            background-color: skyblue;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }

        .center {
            width: 100%;
            height: 100%;
            background-color: rgb(186, 206, 223);
        }

        .right {
            width: 300px;
            height: 100%;
            background-color: darkgray;
            margin-left: -300px;
            position: relative;
            right: -300px;
        }

        .left,
        .center,
        .right {
            text-align: center;
            line-height: 500px;
            float: left;
        }

---

尾语

写到这里就已经实现了三列布局，中间自适应，两边等宽的效果了。希望对前端小伙伴有所帮助，谢谢大家的支持！