浅显了解自适应布局

最新推荐文章于 2021-08-30 07:50:00 发布

consistent__

最新推荐文章于 2021-08-30 07:50:00 发布

阅读量115

点赞数

本文链接：https://blog.csdn.net/consistent__/article/details/104557312

版权

自适应布局

一、

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

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

左侧固定宽度，右侧自适应布局

1、左侧使用float浮动，给固定宽度，右侧设置margin-left：


　　.left{float:left;width:300px;background:#F00;}

　　.right{margin-left:300px;background:#00F;}

2、左侧使用绝对定位absolute；固定宽度，右侧设置margin-left：


　　.left{position:absolute;left:0;width:300px;background:#F00;}

　　.right{margin-left:300px;background:#00F;}

3、左侧使用绝对定位，固定宽度，右侧也使用绝对定位(父级给相对定位)：


　　.left{position:absolute;left:0;width:300px;background:#F00;}

　　.right:{position:absolute;left:300px;background:#00F;}

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

1、左侧用左浮动，margin-right为负值，值为右边距==右侧层的宽度的负值（左撑开，距离右侧的距离不错层），右侧的右浮动，固定宽度：


　　.left{float:left;width:100%;margin-right:-300px;background:#F00;}

　　.right{float:right;width:300px;background:#00F;}

2、左侧右侧都使用固定定位，右侧固定宽度（父级设置相对定位）：


　　.left{position:absolute;right:300px;width:auto;background:#F00;}

　　.rigth{position:absolute;right:0;width:300px;background:#00F;}

三列布局

1.自适应列的width根据calc()自动计算，如：父容器width - 固定列width。

*{ margin: 0;padding: 0 }
 
.container {
    position: absolute;
    width: 100%;
    height: 100%;
}
 
.left {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #72e4a0;
}
 
.mid {
    float: left;
    width: calc(100% - 100px - 100px);
    height: 100%;
    background-color: #9dc3e6;
}
 
.right {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #4eb3b9;
}

2.在父元素设置display为flex时，其中一列的flex为1，其余列都设置固定width。

* { margin: 0;padding: 0 }
 
.container {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
}
 
.left {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #72e4a0;
}
 
.mid {
    float: left;
    height: 100%;
    flex: 1;
    background-color: #9dc3e6;
}
 
.right {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #4eb3b9;
}