CSS | CSS实现两栏布局（左边定宽右边自适应，左右成比自适应）

一、左边定宽右边自适应

1.浮动

2.利用浮动+margin

3.定位+margin

4.flex布局

5.table 布局

二、左右成比自适应

1:1

1flex布局

table布局

1:2

flex布局

三列布局链接：CSS | 实现三列布局（两边边定宽中间自适应，自适应成比）-CSDN博客

<div class="father">
      <div class="left">左边自适应</div>
      <div class="right">右边自适应</div>
    </div>

一、左边定宽右边自适应

实现效果：

1.浮动

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

2.利用浮动+margin

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

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

3.定位+margin

.father {
  position: relative;
}

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

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

4.flex布局

.father {
  display: flex;
}

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

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

5.table 布局

.father {
  width: 100%;
  display: table;
}

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

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

二、左右成比自适应

1:1

1flex布局

.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布局

.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布局

.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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/954067.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！