CSS如何实现三列布局？如果两端固定、中间是自适应又该如何做？

• 使用浮动布局来实现

1. 左侧元素与右侧元素优先渲染，分别向左和向右浮动
2. 中间元素在文档流的最后渲染，并将 width 设为 100%，则会自动压到左右两个浮动元素的下面，随后在中间元素中再添加一个div元素并给其设置 margin 左右边距分别为左右两列的宽度，就可以将新元素调整到正确的位置。

　　html部分：

<div class="container">
    <div class="left">this is left</div>
    <div class="right">this is right</div>
    <div class="center">
        <div class="middle">
            this is center
        </div>
    </div>
</div>

　　css部分：

.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.left {
    float: left;
    width: 400px;
    height: 800px;
    background-color: black;
}
.center {
    width: 100%;
    height: 1000px;
    background-color: yellow;
}
.middle {
    background-color: #fff;
    margin: 0 400px;
    height: 850px;
}
.right {
    float: right;
    width: 400px;
    height: 800px;
    background-color: red;
}

• 试试利用 BFC

1. 同样的左右两列元素优先渲染，并分别左右浮动。
2. 接下来将中间元素设置 overflow: hidden; 成为 BFC 元素块，不与两侧浮动元素叠加，自然能够插入自己的位置。

　　html部分：

<div class="container">
    <div class="left">this is left</div>
    <div class="right">this is right</div>
    <div class="center">
        this is center
    </div>
</div>

　　css部分：

.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.left {
    float: left;
    width: 400px;
    height: 800px;
    background-color: black;
}
.center {
    overflow: hidden;
    height: 1000px;
    background-color: yellow;
}
.right {
    float: right;
    width: 400px;
    height: 800px;
    background-color: red;
}

• 通过左右元素设置定位，中间元素设置 width: auto; 来实现

　　html部分：

<div class="container">
    <div class="left">this is left</div>
    <div class="center">
        this is center
    </div>
    <div class="right">this is right</div>
</div>

　　css部分：

.container {
    width: 100%;
    height: 100%;
    position: relative;
}
.left {
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 800px;
    background-color: black;
 }
.center {
    /* 如果没有这一句，那么，center这个div的文字就不会自动换行 */
    width: auto; 
    margin: 0 400px;
    height: 1000px;
    background-color: yellow;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 900px;
    background-color: red;
}

• 双飞翼布局

　　主要利用了浮动、负边距、相对定位三个布局属性，使三列布局就像小鸟一样，拥有中间的身体和两侧的翅膀。

　　html部分：

<div class="grid">
    <div id="div-middle-02">
        <div id="middle-wrap-02"><span>div-middle</span></div>
    </div>
    <div id="div-left-02"><span>div-left</span></div>
    <div id="div-right-02"><span>div-right</span></div>
</div>

　　css部分：

#div-middle-02 {
    float: left;
    background-color: #fff9ca;
    width: 100%;
    height: 80px;
}
#div-left-02 {
    float: left;
    background-color: red;
    width: 150px;
　　/* 重点看这里 */
    margin-left: -100%;
    height: 50px;
}

#div-right-02 {
    float: left;
    background-color: yellow;
    width: 200px;
　　/* 重点看这里 */
    margin-left: -200px;
    height: 50px;
}
#middle-wrap-02 {
    margin: 0 200px 0 150px;
    background-color: pink;
}
 

　　

转载于:https://www.cnblogs.com/belongs-to-qinghua/p/11352453.html