CSS介绍4种方式实现自适应两栏布局

LittleChan229

已于 2023-05-24 13:03:14 修改

阅读量371

点赞数

文章标签： css css3 html

于 2023-05-24 00:28:09 首次发布

本文链接：https://blog.csdn.net/qq_45742208/article/details/130837835

版权

左右侧固定实现都是一样道理的

前3种方式统一布局：

<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

1、float:

右侧固定，左侧自由伸缩。效果图：

在这里插入图片描述

* {
    padding: 0;
    margin: 0;
 }
.left {
   float: right;
   width: 100px;
   height: 100px;
   background-color: transparent;
}
.right {
   height: 100px;
   margin-right: 100px; 
   background-color: burlywood;
}

2、position:

右侧固定，左侧自由伸缩。效果图：

在这里插入图片描述

* {
    margin: 0;
    padding: 0;
}
.left {
     position: absolute;
     right: 0;
     width: 100px;
     height: 100px;
     background-color: red;
        }
.right {
      height: 100px;
      background-color: tomato;
      margin-right: 100px;
}

3、bfc:

左侧固定，右侧自由伸缩。效果图：

在这里插入图片描述

 * {
   padding: 0;
   margin: 0;
 }
.left {
    float: left; 
    width: 100px;
    height: 100px;
    background-color: transparent;
        }
.right {
     height: 100px;
     /* 触发bfc */
     overflow: hidden;
     background-color: crimson;
}

4、flex:

左侧固定，右侧自由伸缩。效果图：

在这里插入图片描述

布局：

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

css：

.box {
   display: flex;
}
.right {
     flex: 1;
     height: 100px;
     background-color: blanchedalmond;
        }
.left {
     width: 100px;
     height: 100px;
     background-color: transparent;
}