CSS | CSS实现两栏布局(左边定宽 右边自适应,左右成比自适应)

目录

[一、左边定宽 右边自适应](#一、左边定宽 右边自适应)

1.浮动

2.利用浮动+margin

3.定位+margin

4.flex布局

[5.table 布局](#5.table 布局)

二、左右成比自适应

1:1

1flex布局

table布局

1:2

flex布局


javascript 复制代码
<div class="father">
      <div class="left">左边自适应</div>
      <div class="right">右边自适应</div>
    </div>

一、左边定宽 右边自适应

实现效果:

1.浮动

javascript 复制代码
.left {
  width: 100px;
  background-color: rebeccapurple;
  float: left;
}
.right {
  width: calc(100%-100px);
  background-color: green;
}

2.利用浮动+margin

javascript 复制代码
.left {
  width: 100px;
  background-color: rebeccapurple;
  float: left;
}

.right {
  background-color: green;
  margin-left: 100px;
}

3.定位+ margin

javascript 复制代码
.father {
  position: relative;
}

.left {
  position: absolute;
  width: 100px;
  left: 0;
  background-color: rebeccapurple;
}

.right {
  background-color: green;
  margin-left: 100px;
}

4 .flex布局

javascript 复制代码
.father {
  display: flex;
}

.left {
  width: 100px;
  background-color: rebeccapurple;
}

.right {
  flex: 1;
  /* flex: 1可以让其填充剩余的空间,以达到拉伸的效果 */
  background-color: green;
}

5.table 布局

javascript 复制代码
.father {
  width: 100%;
  display: table;
}

.left {
  display: table-cell;
  width:300px;
  background-color: rebeccapurple;
}

.right {
  display: table-cell;
  background-color: green;
}

二、左右成比自适应

1:1

1flex布局
javascript 复制代码
.father {
  display: flex;
}
.left {
  width: 200px;
  height: 200px;
  background-color: rebeccapurple;
  flex: 1;
  }
.right {
  width: 200px;
  height: 200px;
  background-color: green;
  flex: 1;
 /* 放大且缩小并等分所有空间 */
 /* flex:1等于flex-grow: 1、flex-shrink: 1、flex-basic: 0% */
}
table布局
javascript 复制代码
.father {
  width: 100%;
  display: table;
}

.left {
  display: table-cell;
  height: 200px;
  background-color: rebeccapurple;
}

.right {
  display: table-cell;
  height: 200px;
  background-color: green;
}

1:2

flex布局
javascript 复制代码
.father {
  display: flex;
}
.left {
  width: 200px;
  height: 200px;
  background-color: rebeccapurple;
  flex: 1;
}
.right {
  width: 200px;
  height: 200px;
  background-color: green;
  flex: 2;
 /* flex:1等于flex-grow: 2、flex-shrink: 2、flex-basic: 0% */
  
}

等分所有空间,宽度比左:右=1:2

flex 布局的默认主轴方向为 row ,所以 flex-basis 属性 默认是控制元素的 width

相关推荐
武子康16 分钟前
Java-72 深入浅出 RPC Dubbo 上手 生产者模块详解
java·spring boot·分布式·后端·rpc·dubbo·nio
_殊途1 小时前
《Java HashMap底层原理全解析(源码+性能+面试)》
java·数据结构·算法
椰椰椰耶2 小时前
【Spring】拦截器详解
java·后端·spring
没有bug.的程序员3 小时前
JAVA面试宝典 - 《MyBatis 进阶:插件开发与二级缓存》
java·面试·mybatis
工业甲酰苯胺3 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止3 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms3 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登3 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in4 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome