左侧固定，右侧自适应的布局方式(新增评论区大佬教的方法）

zhkai 发布于2019-08-29 16:58 / 1845人阅读

摘要：一浮动布局先让固定宽度的浮动使其脱离文档流。的值等于固定的宽度相等。利用负值可以使得，后面的可以与前面的保持同行显示。的宽度必须要减去的宽度要与固定宽度保持一致。内容区域的直接写出即可。五左侧浮动，右侧阮一峰老师写的教程权威传送门

一.浮动布局

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)

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

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

给包裹内容的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. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.

三.calc()计算属性

注意：使用calc计算属性的时候运算符(- +等等)两边必须有空格

注意两个div必须一左一右浮动。

calc的宽度必须要减去的宽度要与固定宽度保持一致。

  .aside{
      float: left;
      width: 200px;
      background-color: red;
  }
  .content{
      calc:(100% - 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.

四.flex布局

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

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

内容区域的div直接写出flex: 1即可。

.container{
    display: flex;
}
.aside{
    flex: 0 0 200px;
    background-color: red; 
}
.content{
    flex: 1;
    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.

五.左侧浮动，右侧overflow:hidden

.aside{
    width: 200px;
    float: left;
    background-color: red;
}
.content{
    overflow: hidden;
    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.

阮一峰老师写的教程权威传送门：http://www.ruanyifeng.com/blo...

云服务器 GPU云服务器 html表格固定左侧 js左侧固定导航菜单自适应阈值的流量算法 html的宽度自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114014.html

CSS基础篇--页面实现两列布局，一列固定宽度，一列宽度自适应方法

摘要：不管是左是右，反正就是一边宽度固定，一边宽度自适应。博客园的很多主题也是这样设计的，我的博客园博客也是右侧固定宽度，左侧自适应屏幕的布局方式。与配合使用首先我们调整一下结构自适应区固定宽度区代码这样实现，的实际宽度就是屏幕宽度。我在前面有一篇文章《CSS基础篇--可扩展性的页面布局》中介绍了如下三种布局方式：1.左右结构，左边100%；右边宽度固定2.左右结构，左边固定，右边100%...

RichardXG 2019-08-28 17:51 评论0 收藏0
css实现左侧宽度自适应，右侧固定宽度

摘要：页面布局中经常用会遇到左侧宽度自适应，右侧固定宽度，或者左侧宽度固定，右侧自适应。一般固定宽度是导航栏，自适应宽度的是主体内容显示区。页面布局中经常用会遇到左侧宽度自适应，右侧固定宽度，或者左侧宽度固定，右侧自适应。总之就是一边固定宽度，一边自适应宽度。一般固定宽度是导航栏，自适应宽度的是主体内容显示区。所以要实现这种布局，就先给出如下html结构：导航区域 ...

Sunxb 2019-08-30 15:52 评论0 收藏0
CSS布局十八般武艺都在这里了

摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。本文首发于知乎专栏：前端指南 CSS布局布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...

includecmath 2019-08-29 12:17 评论0 收藏0
CSS原生布局方式

摘要：布局任何元素在默认的情况下都是处于整个文档流中的，不会浮动的。相对定位如果想为元素设置层级布局模型中的相对定位，需要设置表示相对定位，它通过属性确定元素在正常文档流中的偏移位置。 showImg(https://segmentfault.com/img/remote/1460000009753577); 前言网页原生布局的方法其实网上有很多，大概为Flow（流动布局模型）、Float...

PingCAP 2019-08-20 17:14 评论0 收藏0
css常见的各种布局上（两列布局）

摘要：目录一大结构上的导航栏和内容区域两栏布局博客园为例腾讯课堂个人中心页慕课网个人中心页个人中心页二版的结构三类似九宫格布局的两列结构四图文两列布局左图右文字非垂直居中，左图，右固定行数的文字，右侧文字和左边图片垂直居中。目录：一、大结构上的导航栏和内容区域两栏布局1、博客园为例2、腾讯课堂个人中心页3、慕课网个人中心页4、github个人中心页二、mini版的nav+cont结构三、类似九宫格...

番茄西红柿 2019-04-23 11:40 评论0 收藏0