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

相关推荐
胚芽鞘6813 小时前
关于java项目中maven的理解
java·数据库·maven
岁忧4 小时前
(LeetCode 面试经典 150 题 ) 11. 盛最多水的容器 (贪心+双指针)
java·c++·算法·leetcode·面试·go
CJi0NG4 小时前
【自用】JavaSE--算法、正则表达式、异常
java
一斤代码4 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
Hellyc4 小时前
用户查询优惠券之缓存击穿
java·redis·缓存
中微子4 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年5 小时前
从前端转go开发的学习路线
前端·学习·golang
今天又在摸鱼5 小时前
Maven
java·maven
老马啸西风5 小时前
maven 发布到中央仓库常用脚本-02
java·maven
代码的余温5 小时前
MyBatis集成Logback日志全攻略
java·tomcat·mybatis·logback