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

使用浮动布局来实现

左侧元素与右侧元素优先渲染，分别向左和向右浮动
中间元素在文档流的最后渲染，并将 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

同样的左右两列元素优先渲染，并分别左右浮动。
接下来将中间元素设置 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;

}

巴特西

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

最新文章

热门文章