Better

  • 主页
  • 随笔
所有文章 友链 关于我

Better

  • 主页
  • 随笔

实现左侧固定,右侧自适应两栏布局的方法

2020-04-03

左侧固定,右侧自适应两栏是css中常见的布局,比如本站的主页,左侧是导航栏,右侧则是主要内容。

为了方便理解,整篇文章将左侧盒子记为LA,右侧盒子记为RB,模型如下图。

模型

一、 双inline-block

这种方法是通过width: calc(100% - 140px)来动态计算RB的宽度。为了得到width,我们需要知道:

  • 两个盒子之间的的距离(RB的margin-left);

  • LA宽度(content+padding+border),以此计算父容器宽度的100%需要减去的数值。

为了简化盒子宽度的计算,LA 和 RB 设置为 box-sizing:border-box;以及父元素的box-sizing: content-box;。

由于两个inline-block的盒子,盒子顶端会出现不对齐现象,通过设置vertical-align解决。

inline-block的盒子之间存在空隙,通过设置父容器的font-size: 0;或者用注释消除html中的空格等方法解决。

代码如下

.wrapper {
        padding: 15px 20px;
        border: 1px dashed #ff6c60;
        box-sizing: content-box;//width只包含子元素,不包括border和padding
        font-size: 0; }

.left {
        width: 120px;
        border: 5px solid #ddd;
}
.right {
        margin-left: 20px;
        border: 5px solid #ddd;
        width: calc(100% - 140px);//(left-width)+margin=140px
}

.wrapper .left,
.wrapper .right {
        display: inline-block;
        vertical-align: top;  
        font-size: 14px;
        box-sizing: border-box;
}  

双inline-block虽然利用了calc动态计算盒子宽度,但是也存在以下缺点:

1. 需要知道LA的宽度,两个盒子的距离,还要设置各个元素的box-sizing

2. 需要消除空格字符的影响

3. 需要设置vertical-align: top满足顶端对齐。

二、 双float

LA 和 RB 均通过float来布局,同样利用了calc动态计算RB的宽度

.wrapper {
        padding: 15px 20px;
        border: 1px dashed #ff6c60;
        box-sizing: content-box;
        overflow: auto;//父元素需要清除浮动  
}

.left {
        width: 120px;
        border: 5px solid #ddd;
}
.right {
        margin-left: 20px;
        border: 5px solid #ddd;
        width: calc(100% - 140px);
}

.wrapper .left,
.wrapper .right {
        float: left;
        box-sizing: border-box;
}

双float虽然利用了float布局,但是也存在以下缺点:

1. 需要知道LA的宽度,两个盒子的距离,还要设置各个元素的box-sizing。

2. 父元素需要清除浮动。

无论是inline-block 还是 float 都需要知道每个部分的宽度范围,否则无法实现自适应 。

三、 float+margin-left (更常用一点)

为了让 LA 和 RB 之间具有一定空隙,需要为 LA 留出足够的距离,这个距离的大小(W)=LA的width + 两个盒子之间的距离。通过设置RB的margin-left = W可以实现布局,代码部分如下。

.wrapper {
    overflow: hidden; // 清除浮动,使得父元素的高度可以包含浮动子元素
}

.wrapper .left {
    float: left;
    width: 120px;
}

.wrapper .right {
    margin-left: 150px;//RB 距离 LA 20px
}
.wrapper .left,
.wrapper .right {
     height: 500px;
    border: 5px solid #ddd;
}

这个方法存在的缺点:

1. 需要清除浮动

2. 需要计算右侧盒子的margin-left

四、 absolute+margin-left

LA使用绝对定位(在文档流中不占空间),让RB不能无视LA的存在

.wrapper .left {
    width: 120px;
    position: absolute;
    }

.wrapper .right {
    margin-left: 150px; 
    }

这种方法的缺点是:

1. 使用了绝对定位,若是用在某个div中,需要更改父容器的position。

2. 没有清除浮动的方法,若LA高于RB,就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况。

五、float+BFC

关于BFC可详见BFC,利用了左侧浮动,但是右侧盒子通过overflow: auto形成了BFC,因此右侧盒子不会与浮动的元素重叠。代码如下,

.wrapper {
        padding: 15px 20px;
        border: 1px dashed #ff6c60;
        box-sizing: content-box;
        overflow: auto;//清除浮动
}

.left {
        width:120px;
        border: 5px solid #ddd;
        float: left;
        margin-right: 20px;
}
.right {
        margin-left: 0;
        overflow: auto;//形成BFC
        border: 5px solid #ddd;
}

六、flex布局法(个人觉得非常好用)

关于flex的详细介绍详见flex布局;
.wrapper {
display: flex;
align-items: flex-start;//两列自动对齐
}

.wrapper .left {
         flex: 0 0 auto;
}

.wrapper .right {
        flex: 1 1 auto;
}

七、grid

暂时还没用过 。。。

赏

谢谢你请我吃糖果

  • 网页布局

扫一扫,分享到微信

微信分享二维码
对圣杯布局和双飞翼布局的理解
css学习 水平居中和垂直居中总结
© 2020 Better
Hexo Theme Yilia by Litten
  • 所有文章
  • 友链
  • 关于我

tag:

  • css
  • js
  • html
  • Python
  • Numpy
  • Pandas
  • vue
  • uml
  • 框架
  • c++
  • git
  • 工具
  • javaee
  • java
  • leetcode
  • 数据库
  • tensorflow
  • 工具类
  • 网页布局
  • RL
  • more
  • 算法
  • summary
  • 计算机组成原理
  • 软件测试
  • 插件
  • jsp
  • 移动端布局
  • 操作系统
  • 微信小程序
  • 计算机网络
  • hobby
  • 机器学习
  • python

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true
    

  • 友情链接1
  • 友情链接2
  • 友情链接3
  • 友情链接4
  • 友情链接5
  • 友情链接6
很惭愧

只做了一点微小的工作
谢谢大家