前言
在前端开发中,不管是自己写项目,还是应试,都会遇到这样一个问题,实现左边宽度固定,右边宽度随浏览器的变化而变化,在这个问题上衍生出来的还有一种场景,明明设置了固定宽度,却出现变形的现象,今天就给大家分享一下解决方案。
一、使用 flex 布局
思路:
- 父元素设置 display:flex;
- 左边元素给固定的 flex-basis 属性值;
- 右边元素设置 flex-grow 为 1 或者 flex 为 1。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<style type="text/css">
.box{
height: 100px;
display: flex;
}
.left{
flex-basis: 100px;
background-color: silver;
}
.right{
flex-grow: 1;
background-color: pink;
}
</style>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
二、使用 flex + min-width
思路:
- 父元素设置 display:flex;
- 左边元素设置最小宽度 min-width 属性值;
- 右边元素可设置 flex-grow 为 1 或者 flex 为 1 或者宽度 100%,填充剩余空间。(这里注意只有左边设置最小宽度的时候,右边才能使用100%)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<style type="text/css">
.box{
display: flex;
}
.left{
min-width: 100px;
height:100px;
background-color: silver;
}
.right{
width: 100%;
height:100px;
background-color: pink;
}
</style>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
三、使用 float 浮动
思路:
- 左边元素浮动,设置固定的宽度;
- 右边元素设置 margin-left 距离为左边元素宽度;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<style type="text/css">
.left{
float: left;
width: 100px;
height:100px;
background-color: silver;
}
.right{
margin-left:100px;
height: 100px;
background-color: pink;
}
</style>
<body>
<div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
四、总结
- 实现左边固定,右边随浏览器自适应的主要是通过 flex 布局或者 float 浮动。
- 使用 float 时,左边元素设置固定宽度,右边元素设置相应的 margin-left 值。
- 使用 flex 时,如果左边元素宽度使用 flex-basis 属性,右边元素可设置 flex-grow 为 1 或者 flex 为 1。如果左边元素宽度使用 min-width 属性,右边元素除了可以设置 flex-grow 为 1,或者 flex 为 1,还可以设置宽度 100%。