欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS三列布局之左右宽度固定,中间元素自适应问题 - pwy

程序员文章站 2022-04-21 22:37:46
...

最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈。

首先我想到的是float——浮动布局

使用浮动,先渲染左右两个元素,分别让他们左右浮动,然后再渲染中间元素,设置它的margin左右边距分别为左右两个元素的宽度。例如以下代码就可以实现我们想要的三列效果啦。

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
head>
body>
    div style="width:300px; float:left; background:#6FF">左侧的内容 固定宽度div>
    div style="width:200px; float:right; background-color:#960">右侧的内容 固定宽度div>
    div style="margin-left:300px;margin-right:200px; background-color:#9F3;">中间内容,自适应宽度div>
body>
html>

其次我想到了position——定位

使用定位方式,不需要先渲染中间元素,只要把左右两个元素分别使用定位,left:0;right:0;中间元素设置margin左右边距为左右两个元素的宽度即可。

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    style>
.left{
     width:200px;
     height:500px;
     position: absolute;
     top:0;
     left:0;
     background:blue;
}
.center{
    margin-left: 200px;
    margin-right: 300px;
    height:500px;
    background-color: green;
}
.right{
width:300px;
height:500px;
position: absolute;;
top:0;
right:0;
background: blue;
}
    style>
head>
body>
    div class="left">左边div>
    div class="center">中间div>
    div class="right">右边div>
body>
html>

第三、使用双飞翼布局

使用双飞翼布局与其他方式不同,它最先渲染的是中间元素,然后才渲染两边元素(注意,这一点与float布局方式正好相反哟),先将三个元素都设置为向左浮动,然后使用负边距将左右两个元素覆盖到中间元素的左右两边,形成羽翼。

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    style>
.middle{
    float: left;
    width: 100%;
    height: 50px;
    background-color: #fff9ca;
}
.middle-wrap{
    margin: 0 200px 0 150px;
}
.left{
    float: left;
    width: 150px;
    height: 50px;
    background-color: red;
    margin-left: -100%;       /*负边距的作用就是让左边div盖在中间div上面*/
}
.right{
    float: left;
    width: 200px;
    height: 50px;
    background-color: yellow;
    margin-left: -200px;    /*让右边的div覆盖在中间的div右边*/
}
    style>
head>
body>
    div class="middle">
        div class="middle-wrap">middlediv>
    div>
    div class="left">leftdiv>
    div class="right">rightdiv>
body>
html>

双飞翼布局的最大优点是它的兼容性——可以兼容到IE6.

最后我还想说说CSS3的flex布局方法

该方式的思想是设置一个弹性容器包裹三个元素,并将这个容器设置为水平排列(flex-flow:row),左右两边元素设置固定宽度,中间元素设置为flex:1;

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    style>
.flex {
    display: flex;
    flex-flow: row;
}
.left{
    width: 200px;
    height: 50px;    
    background-color: red;
}
.center{
    flex: 1; 
    height: 50px;
    background-color: #fff9ca;
}
.right {
    width: 300px;
    height: 50px;
    background-color: yellow;
}
    style>
head>
body>
div class="flex">
    div class="left">左边div>
    div class="center">中间div>
    div class="right">右边div>
div>
body>
html>

但不得不说的是flex布局的兼容性还不够完善,所以个人不推荐使用这种方式布局。

嘿嘿,以上就是我能想到的实现左右固定,中间自适应的三列布局的几种方式啦啦啦