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

相关推荐
智码看视界30 分钟前
老梁聊全栈系列:(阶段一)架构思维与全局观
java·javascript·架构
黎宇幻生32 分钟前
Java全栈学习笔记33
java·笔记·学习
小周同学@2 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok2 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~2 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号2 小时前
【大前端】前端生成二维码
前端·二维码
程序员码歌3 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
BillKu3 小时前
推荐 Eclipse Temurin 的 OpenJDK
java·ide·eclipse
Morri33 小时前
[Java恶补day53] 45. 跳跃游戏Ⅱ
java·算法·leetcode
悟能不能悟3 小时前
eclipse怎么把项目设为web
java·eclipse