快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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)

  1. 是固定宽度的div脱离文档流。

  2. 利用marin负值可以使得,后面的div可以与前面的div 保持同行显示。

  3. 给包裹内容的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布局

  1. 需要给父级div设置display: flex属性。

  2. 固定宽度的div设置flex: 0 0 200px即可。

  3. 内容区域的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如何实现左侧固定右侧自适应的布局方式-创新互联
网站URL:http://6mz.cn/article/ceeeii.html

免费获取网站建设与品牌策划方案报价

*主要业务范围包括:高端网站建设, 集团网站建设(网站建设网站制作)找网站建设公司就上快上网。
提交需求

    联系我们

    028-86922220
  • 手机:13518219792
  • 地址:成都市太升南路288号锦天国际A幢1002号
  • 24小时服务热线:400-028-6601

    网站建设服务

  • 网页设计
  • 网站制作
  • 网站开发

    网站推广服务

  • 营销网站建设
  • 百度快速排名
  • 整站网站推广

    网站运维服务

  • 基础维护
  • 网站改版
  • 网站维护

    FOLLOW US

  • 微信二维码

    微信二维码

Copyright © 2022 成都快上网科技有限公司 成都网站建设公司-选网站建设公司快上网!国内专业的网站制作公司!
All Rights Reserved 版权所有 蜀ICP备19037934号-11