css实现常用的两栏三栏布局

发布时间：2020-12-14 19:49:57 所属栏目：资源来源：网络整理

导读：1、两栏 = > = >left box 自适应 = >right box 固定 1.1、左侧宽度固定，右侧自适应方式一、float+margin 方式二、float+overflow 方式三、float+position 方式四、flex 2、三栏两边固定中间自适应方式一、float+margin 固定 ssss ddddd % .wrapper .left

1、两栏

=>left box

自适应

=>right box 固定

1.1、左侧宽度固定，右侧自适应

方式一、float+margin

方式二、float+overflow

方式三、float+position

方式四、flex

2、三栏

两边固定中间自适应

方式一、float+margin

固定

ssss

ddddd


%.wrapper .left{

<span style="color: #0000ff">float<span style="color: #000000">: left;

width: 200px;

background-<span style="color: #000000">color: #5cb85c;

}

.wrapper .right{

<span style="color: #0000ff">float<span style="color: #000000">: right;

width: 100px;

background-<span style="color: #000000">color: #66afe9;

}

.wrapper .middle{

margin: <span style="color: #800080">0 110px <span style="color: #800080">0<span style="color: #000000"> 230px;

background-<span style="color: #000000">color: #A3AEFF;

}

方式二、position+margin (这种方式的父元素高度取决于中间部分的高度，当两侧高度大于中间高度时，则出现高度塌陷，除非指定父元素的高度，当两侧高度小于中间部分时，可以使用。)

.wrapper .left{
position: absolute;
left: 0;
width: 200px;
background-color: #5cb85c;
}
.wrapper .right{
position: absolute;
right: 0;
width: 100px;
background-color: #66afe9;
}
.wrapper .middle{
margin: 0 110px 0 230px;
background-color: #A3AEFF;
}

方式三、flex

固定

=>中间自适应

ssss

ddddd

.wrapper{
display: flex;
flex-direction: row;
width: 100%;
.left{
width: 200px;
background-color: #5cb85c;
}
.right{
width: 100px;
background-color: #66afe9;
}
.middle{
flex: 1;
margin: 0 10px 0 30px;
background-color: #A3AEFF;
}
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!