css如何实现左侧固定右侧自适应的布局方式-创新互联
小编给大家分享一下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.
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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia labore facere delectus quaerat expedita, tenetur recusandae tempora eos natus suscipit voluptatum necessitatibus soluta voluptates modi ullam. Ab minima similique, illum!
三.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如何实现左侧固定右侧自适应的布局方式”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
分享标题：css如何实现左侧固定右侧自适应的布局方式-创新互联
文章位置：http://scjbc.cn/article/ceeeii.html
