css实现左侧固定右侧自适应的布局方式

  发布时间2018-10-16 15:58:31   作者李钢铁   我要评论

这篇文章主要介绍了css实现左侧固定右侧自适应的布局方式详细的介绍了3种方法小编觉得挺不错的现在分享给大家也给大家做个参考一起跟随小编过来看看吧

一.浮动布局

1.先让固定宽度的div浮动使其脱离文档流
2.margin-left的?#26723;?#20110;固定div的宽度相等

   .aside{
        float: left;
        width: 200px;
        background-color: red;
    }
    .content{
        margin-left: 200px;
        background-color: blue;
    }
    
<div class="aside">
    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.
</div>
<div class="content">
    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.
</div>

二.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;
}
<div class="aside">
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.
</div>
<div class="content">
<div class="inner">
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!
</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 adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
</div>
<div class="content">
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.
</div>

四.flex布局

  1. 需要给父级div设置display: flex属性
  2. 固定宽度的div设置flex: 0 0 200px即可
  3. 内容区域的div直?#26377;?#20986;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 adipisicing elit. Fugiat magnam nihil nostrum, similique dolor deserunt voluptatem pariatur alias, ipsum, error quos quo accusantium. Deleniti neque, pariatur voluptates maxime quam perferendis!
</div>
<div class="content">
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.
</div>

以上就是本文的全部内容希望对大家的学习有所帮助也希望大家多多支持脚?#23616;?#23478;

相关文章

  • css 两边固定中间自适应布局的实现

    这篇文章主要介绍了css 两边固定中间自适应布局的实现介绍了四种常用方法以及原理浮动浮动内嵌 div定位flex具有一定的参考价值?#34892;?#36259;的小伙伴们可以参?#23478;?#19979;
    2018-10-17
  • css实现左侧固定右侧自适应的布局方式

    这篇文章主要介绍了css实现左侧固定右侧自适应的布局方式详细的介绍了3种方法小编觉得挺不错的现在分享给大家也给大家做个参考一起跟随小编过来看看吧
    2018-10-16
  • css实现三栏布局的几种方法及优缺点

    三栏布局在实?#23454;?#24320;发十分常见比如淘宝网的首页即左边商品导航和右边导航固定宽度中间的主要内容随浏览器宽度自适应具有一定的参考价值?#34892;?#36259;的小伙伴们可以参考
    2018-09-29
  • rem布局原理解析

    这篇文章主要介绍了rem布局原理解析的相关资料,小编觉得挺不错的现在分享给大家也给大家做个参考一起跟随小编过来看看吧
    2018-09-07
  • ?#31243;?#26368;全面的水平垂?#26412;?#20013;方案与flexbox布局

    这篇文章主要介绍了?#31243;?#26368;全面的水平垂?#26412;?#20013;方案与flexbox布局 的相关资?#24076;?#20027;要介绍了定长定宽或不定长宽的各类容器的垂?#26412;?#20013;以及flexbox非常具有实用价值需要的朋
    2018-08-20
  • CSS实现响应式布局的方法

    这篇文章主要介绍了CSS实现响应式布局的方法的相关资料,小编觉得挺不错的现在分享给大家也给大家做个参考一起跟随小编过来看看吧
    2018-07-24
  • 详解css栅格系统在项目中的灵活运用

    这篇文章主要介绍了详解css栅格系统在项目中的灵活运用的相关资?#24076;?#23567;编觉得挺不错的现在分享给大家也给大家做个参考一起跟随小编过来看看吧
    2018-07-23
  • CSS宽高等比布局的方法

    这篇文章主要介绍了CSS宽高等比布局的方法的相关资?#24076;?#23567;编觉得挺不错的现在分享给大家也给大家做个参考一起跟随小编过来看看吧
    2018-03-12
  • 详解css布局实现左中右布局的5种方式

    这篇文章主要介绍了详解css布局实现左中右布局的5种方式的相关资料,小编觉得挺不错的现在分享给大家也给大家做个参考一起跟随小编过来看看吧
    2018-03-05
  • ?#31243;css网页的几种布局

    这篇文章主要介绍了?#31243;css网页的几种布局的相关资?#24076;?#23567;编觉得挺不错的现在分享给大家也给大家做个参考一起跟随小编过来看看吧
    2018-01-08

最新评论

35ѡ7