css布局---两栏布局

Garlen20o

已于 2022-07-11 10:32:07 修改

阅读量216

点赞数

分类专栏： CSS

于 2022-06-17 23:49:47 首次发布

本文链接：https://blog.csdn.net/weixin_45443843/article/details/125341756

版权

HTML布局 flex布局浮动元素定位自适应

关键词由CSDN通过智能技术生成

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

两栏布局

一栏定宽，另一栏自适应

html结构

<!-- 一栏定宽，一栏自适应 -->
<div class="wrapper">
  <div class="left">left</div>
  <div class="right">
    right
  <div class="ele">我是自适应栏里的元素</div>
  </div>
</div>

1、,margin-left + float
定宽一栏浮动，自适应栏紧贴,并且right需要左移定宽的距离，避免自身子元素被遮挡

/* 1、,margin-left + float
定宽一栏浮动，自适应栏紧贴,并且right需要左移定宽的距离，避免自身子元素被遮挡
*/
/* .left{
  float:left;
  width: 100px;
  height: 500px;
  background-color: skyblue;
}
.right{
  height: 500px;
  background-color: pink;
  margin-left:100px
} */

2、flex布局+ flex设置伸缩实现

/* 2、flex布局+ flex设置伸缩实现 */
 .wrapper{
  display:flex;
}
.left{
  width: 100px;
  height: 500px;
  background-color: skyblue;
}
.right{
  height: 500px;
  background-color: pink;
  flex:1;
}

3、float+ overflow:BFC与浮动元素不重叠

/* 3、float+ overflow:BFC与浮动元素不重叠 */
.left{
  float:left;
  width: 100px;
  height: 500px;
  background-color: skyblue;
}
.right{
  height: 500px;
  background-color: pink;
  overflow:hidden;
}

4、定位+ margin-left



/* 4、定位+ margin-left */
 .left{
  position: absolute;
  width: 100px;
  height: 500px;
  background-color: skyblue;
}
.right{
  min-width:200px;
  height: 500px;
  background-color: pink;
  margin-left:100px;
}