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.

.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.

.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.

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如何实现左侧固定右侧自适应的布局方式-创新互联

其他资讯