css实现左侧固定右侧自适应的布局方式
网站建设 2023-01-28 21:39www.1681989.com免费网站
一.浮动布局
1.先让固定宽度的div浮动!使其脱离文档流。
2.marg-left的值等于固定div的宽度相等。
.aside{ float: left; width: 200px; background-color: red; } .content{ marg-left: 200px; background-color: blue; } <div class="aside"> Lorem ipsum dolor sit amet, consectetur adipisicg elit. Labore provident dolor voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distctio asperiores odit nobis soluta, esse aspernatur beatae. </div> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicg elit. Labore provident dolor voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distctio asperiores odit nobis soluta, esse aspernatur beatae. </div>
二.marg的负值(3个div)
- 是固定宽度的div脱离文档流。
- 利用mar负值可以使得,后面的div可以与前面的div 保持同行显示。
- 给包裹内容的div加marg-left 可以使得与左边的文字不重叠
.aside{ float: left; marg-right: -200px; width: 200px; background-color: red; } .content{ float: right; } .content .ner{ marg-left: 200px; background-color: blue; } <div class="aside"> Lorem ipsum dolor sit amet, consectetur adipisicg elit. Labore provident dolor voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distctio asperiores odit nobis soluta, esse aspernatur beatae. </div> <div class="content"> <div class="ner"> Lorem ipsum dolor sit amet, consectetur adipisicg elit. Mollitia labore facere delectus quaerat expedita, teur recusandae tempora eos natus suscipit voluptatum necessitatibus soluta voluptates modi ullam. Ab mima similique, illum! </div> </div>
三.calc()计算属性
注意使用calc计算属性的时候 运算符(- +等等)两边必须有空格
注意两个div必须一左一右浮动。
calc的宽度必须要减去的宽度要与固定宽度保持一致。
.aside{ float: left; width: 200px; } .content{ float: right; calc:(100% - 200px); } <div class="aside"> Lorem ipsum dolor sit amet, consectetur adipisicg elit. Labore provident dolor voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distctio asperiores odit nobis soluta, esse aspernatur beatae. </div> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicg elit. Labore provident dolor voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distctio asperiores odit nobis soluta, esse aspernatur beatae. </div>
四.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; } <div class="aside"> Lorem ipsum dolor sit amet, consectetur adipisicg elit. Fugiat magnam nihil nostrum, similique dolor deserunt voluptatem pariatur alias, ipsum, error quos quo ausantium. Deleniti neque, pariatur voluptates maxime quam perferendis! </div> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicg elit. Consectetur tempora sequi mima, placeat esse nulla dolor dolores praesentium illo, distctio fugiat eligendi debitis animi ut impedit, magni vitae officiis, architecto. </div>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
网站设计
- 静宁会SEO的网站建设公司:全面提升您的网络影
- 提升在线业务的关键:选择最佳的丽水网站建设
- 浙江网站优化发展潜力如何
- 井研专业的网站建设公司:打造您的在线品牌
- 灵山SEO网站建设公司:提升您的在线业务表现
- 蒙城网站建设优化公司:提升您网站表现的理想
- 阳谷企业网站优化:提升线上业务力的关键
- 樟树专业的网站建设公司:打造您在线业务的坚
- 通河百度SEO排名的策略与技巧
- 重庆百度快照排名如何进行精准的客户引流
- 重庆百度快照排名
- 常宁便宜的建站公司:助您轻松打造在线业务
- 巫溪百度网站优化:提升网站曝光率与流量的关
- 湖北整站优化怎么做才能放大客户需求
- 闸北网站建设多少钱?全面解析与预算规划
- 辽宁企业网站优化怎么做电话营销