189 8069 5689
小编给大家分享一下css如何实现左侧固定右侧自适应的布局方式，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
一.浮动布局
1.先让固定宽度的div浮动！使其脱离文档流。
2.margin-left的值等于固定div的宽度相等。
.aside{
float: left;
width: 200px;
background-color: red;
}
.content{
margin-left: 200px;
background-color: blue;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
二.margin的负值(3个div)
是固定宽度的div脱离文档流。
利用marin负值可以使得，后面的div可以与前面的div 保持同行显示。
给包裹内容的div加margin-left 可以使得与左边的文字不重叠
.aside{
float: left;
margin-right: -200px;
width: 200px;
background-color: red;
}
.content{
float: right;
}
.content .inner{
margin-left: 200px;
background-color: blue;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
三.calc()计算属性
注意：使用calc计算属性的时候 运算符(- +等等)两边必须有空格
注意两个div必须一左一右浮动。
calc的宽度必须要减去的宽度要与固定宽度保持一致。
.aside{
float: left;
width: 200px;
}
.content{
float: right;
calc:(100% - 200px);
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
四.flex布局
需要给父级div设置display: flex属性。
固定宽度的div设置flex: 0 0 200px即可。
内容区域的div直接写出flex: 1即可。
body{
display: flex;
}
.aside{
flex: 0 0 200px;
background-color: red;
}
.content{
flex: 1;
background-color:blue;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat magnam nihil nostrum, similique dolor deserunt voluptatem pariatur alias, ipsum, error quos quo accusantium. Deleniti neque, pariatur voluptates maxime quam perferendis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur tempora sequi minima, placeat esse nulla dolor dolores praesentium illo, distinctio fugiat eligendi debitis animi ut impedit, magni vitae officiis, architecto.
看完了这篇文章，相信你对“css如何实现左侧固定右侧自适应的布局方式”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！