详解css布局实现左中右布局的5种方式

CSS布局是前端开发中最常用的技术之一。左中右布局是其中较为常见的一种，在页面中左右两侧留空间，中间放置主要的内容。下面我们来详解CSS布局实现左中右布局的5种方式。

## 1. 浮动布局

浮动布局是最常用的CSS布局之一，它实现左中右布局也非常简单。我们可以使用float属性让左右两侧浮动，中间部分利用margin或者padding设置间距即可。

<style>
    .left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: blue;
    }
    .main {
        margin: 0 200px;
        height: 200px;
        background-color: green;
    }
</style>

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

其中，left和right两个元素设置了float属性，分别向左和向右浮动，宽度和高度也设置了具体值。main元素设置了margin属性，左右两侧都设置200px的边距，相当于中间留了400px的空间用来放置主要内容。

## 2. 绝对定位布局

另一种实现左中右布局的方式是绝对定位布局。我们可以利用position属性和top、left、right、bottom属性设置左中右三部分的位置。

<style>
    .left {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .right {
        position: absolute;
        right: 0;
        top: 0;
        width: 200px;
        height: 200px;
        background-color: blue;
    }
    .main {
        position: absolute;
        left: 200px;
        right: 200px;
        top: 0;
        height: 200px;
        background-color: green;
    }
</style>

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

这里，left和right元素通过设置position属性为absolute，left和right属性设置为0，实现了两个元素左右各占据一侧的效果。main元素通过设置left和right属性为200px，实现了中间留出400px的空间的效果。

## 3. 弹性盒子布局

弹性盒子布局是CSS3新增的一种布局方式，它可以很好地实现左中右布局。我们可以使用display:flex属性将父元素设置为flex布局，再利用justify-content属性设置左右两侧的对齐方式。

<style>
    .container {
        display: flex;
        justify-content: space-between;
        height: 200px;
    }
    .left {
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .right {
        width: 200px;
        height: 200px;
        background-color: blue;
    }
    .main {
        flex: 1;
        height: 200px;
        background-color: green;
    }
</style>

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

这里，容器元素设置了display:flex属性，使它成为一个弹性盒子，左右两侧的对齐方式通过设置justify-content属性为space-between来实现。中间部分通过设置flex:1来占据剩下的空间。

## 4. 双飞翼布局

双飞翼布局是一种改良版的浮动布局，它的实现方式与浮动布局类似，主要区别在于使用了嵌套的div元素来实现布局。

<style>
    .container {
        height: 200px;
    }
    .left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: blue;
    }
    .center {
        margin: 0 200px;
        height: 200px;
        background-color: green;
    }
    .center-inner {
        margin: 0 -200px;
    }
</style>

<div class="container">
    <div class="center">
        <div class="center-inner"></div>
    </div>
</div>
<div class="left"></div>
<div class="right"></div>

在这个布局中，我们使用了一个中间div元素，它包含了一个内部div元素来承载主要内容。左右两侧通过float属性向左和向右浮动。中间部分通过设置margin属性，留出了左右两侧各200px的空间。

## 5. 圣杯布局

圣杯布局也是一种改良版的浮动布局，它的实现方式与双飞翼布局类似，使用了嵌套的div元素来实现布局。

<style>
    .container {
        height: 200px;
        padding: 0 200px;
        background-color: green;
    }
    .left {
        float: left;
        width: 200px;
        height: 200px;
        position: relative;
        left: -200px;
        margin-left: -100%;
        background-color: red;
    }
    .right {
        float: right;
        width: 200px;
        height: 200px;
        position: relative;
        right: -200px;
        margin-right: -100%;
        background-color: blue;
    }
    .main {
        height: 200px;
        background-color: green;
    }
</style>

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

在这个布局中，我们使用了一个包含左侧、中间和右侧的div元素，中间部分占据了整个容器的空间。左右两侧分别使用了position和margin属性来定位，同时通过设置left和right属性来调整位置和尺寸。

## 总结

以上就是五种实现左中右布局的CSS布局方式。每种方式都有各自的优点和缺点，根据实际需求选择最适合的方式是最重要的。当然，对于初学者来说，也可以多进行尝试和实践，加深对CSS布局的理解和应用。