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

相关推荐
云和数据.ChenGuang18 分钟前
java常见SSL bug解决方案
java·bug·ssl
songx_9920 分钟前
leetcode29( 有效的括号)
java·数据结构·算法·leetcode
dllmayday26 分钟前
FontForge 手工扩展 iconfont.ttf
css·qt
于樱花森上飞舞26 分钟前
【java】常见排序算法详解
java·算法·排序算法
维持好习惯29 分钟前
复杂Excel文件导入功能(使用AI快速实现)
java·spring boot·excel
酷炫码神36 分钟前
第 2 篇:Java 入门实战(JDK8 版)—— 编写第一个 Java 程序,理解基础运行逻辑
java·开发语言·策略模式
小朋友,你是否有很多问号?38 分钟前
Spark10- RDD转DataFrame的三种方式
大数据·javascript·spark
月阳羊42 分钟前
【硬件-笔试面试题-93】硬件/电子工程师,笔试面试题(知识点:波特图)
java·经验分享·单片机·嵌入式硬件·面试
Wiktok1 小时前
pureadmin的动态路由和静态路由
前端·vue3·pureadmin
devii661 小时前
html.
前端