CSS布局如何实现左固定右自适应，有什么技巧

发布时间：2023-09-27 09:52:26 所属栏目：语言来源：

导读：这篇文章给大家介绍了“CSS布局如何实现左固定右自适应，有什么方法”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

这

这篇文章给大家介绍了“CSS布局如何实现左固定右自适应，有什么方法”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

这是一道面试题，你有多少种办法呢？

这里我们假设左边名为 left，宽度为 200 px，右边名为 right。即默认

.left {
width: 200px;
}
我的理解分四大类

flex 布局

需设置父元素高度
grid 布局

需设置父元素高度
绝对定位

双子元素 absolute

不需要设置父元素高度
子元素都设置高度，右边子元素 left：200px + width: 100%
左元素 absolute + 右元素 margin-left

不需要设置父元素高度
子元素都设置高度，右边子元素 margin-left: 200px + width: 100%
float 浮动

左元素左浮动，右元素不动

无需父元素
左元素需设置宽高和浮动，右元素设置高度即可
左元素左浮动，右元素右浮动

无需父元素
左元素设置宽高和左浮动，右元素设置右浮动以及高和宽（width: calc(100% - 200px)）
flex 布局
需要一个父元素做 flex 布局，且需要给它一个高度（撑开容器）

.father {
display: flex;
height: 200px;
}
.right {
flex: 1;
}
grid 布局
高级的布局方式，子元素不需要设置宽度，单单设置父元素属性即可。

.grid {
display: grid;
grid-template-columns: 200px 100%;
height: 200px;
}
双子元素 + absolute

需要给子元素设置宽高，不然撑不起来。右元素设置left: 200px

.father {
position: relative;
height: 200px;
}
.left {
position: absolute;
height: 200px;
}
.right {
position: absolute;
left: 200px;
height: 200px;
width: 100%;
}
左元素 absolute + 右元素 margin-left
.father {
position: relative;
height: 200px;
}
.left {
position: absolute;
width: 200px;
height: 200px;
}
.right {
width: 100%;
height: 200px;
margin-left: 200px;
}
无父元素 + 左元素左浮动，右元素不动。

前两种都需要有个父元素，但浮动不需要。

左边浮动，下一个元素独占位置，并排一行。

同样，需要设置高度，子元素才能撑开。

.left {
float: left;
height: 200px;
}
.right {
height: 200px;
}
无父元素 + 左边左浮动，右边有浮动。

浮动不需要父元素，浮动就区别于正常文档流。

我的理解是正常文档流是二维层面，而浮动相当于成了三维，区别于 Z 轴。

右边元素有浮动不够，还需要设置宽度。

.left {
float: left;
height: 200px;
}

.right {
float: right;
height: 200px;
width: calc(100% - 200px);
}
只要是 float 实现此功能的，都不需要父元素，以及自身都需要设置高度。

（编辑：汽车网）

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