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

  发布时间:2018-10-16 15:58:31   作者:李钢铁   我要评论
这篇文章主要介绍了css实现左侧固定右侧自适应的布局方式,详细的介绍了3种方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

一.浮动布局

1.先让固定宽度的div浮动!使其脱离文档流。
2.margin-left的值等于固定div的宽度相等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
   .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 可以使得与左边的文字不重叠
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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的宽度必须要减去的宽度要与固定宽度保持一致。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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直接写出flex: 1即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

蓄力AI

相关文章

  • css九宫格布局的五种方法

    本文主要介绍了css九宫格布局的五种方法,内容包括grid布局、flex布局、table布局、float浮动定位、inline-block+letter-spacing属性这五种方法的实现,感兴趣的可以了解下
    2023-09-18
  • CSS实现元素水平垂直居中的几种方法

    在Web开发中,经常会遇到需要将元素水平和垂直居中的情况,今天,将为大家分享几种CSS方法,让你的元素轻松居中,让页面更美观吸引人,感兴趣的小伙伴可以自己动手试一试
    2023-09-08
  • css实现元素居中的6种方法

    相信大家在面试的时候也会经常碰到css实现元素居中的方法,下面我介绍6种方法给大家,欢迎大家评论区交流
    2023-09-07
  • flex布局中使用flex-wrap实现换行的项目实践

    最近需要做个换行的布局,本文主要介绍了flex布局中使用flex-wrap实现换行的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需
    2022-06-16
  • CSS布局之浮动(float)和定位(position)属性的区别

    今天看到有朋友留言问浮动和定位有什么区别,如何使用?今天找了篇文章,讲的比较通俗易懂,供大家参考
    2021-09-23
  • css实现元素居中的N种方法

    这篇文章主要介绍了css实现元素居中的N种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • div水平布局两边对齐的三种实现方法

    这篇文章主要介绍了div水平布局两边对齐的三种实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起
    2021-01-21
  • waterfall瀑布流布局+动态渲染的实现

    这篇文章主要介绍了waterfall瀑布流布局+动态渲染的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起
    2021-01-19
  • 页面中有间隔的方格布局如何完美实现方法

    这篇文章主要介绍了页面中有间隔的方格布局如何完美实现方法。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来
    2020-11-27
  • css实现六种自适应两栏布局方式

    这篇文章主要介绍了css实现六种自适应两栏布局方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习
    2020-10-28

最新评论