自适应的两栏布局

Posted 2021-09-15 REMZ

方法一：float布局

html部分

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

CSS部分

.main{
  position: relative;
  width: 100%;
  height: 100%;
}

 .right{
  width: 100%;
  height: 100%;
  background: #4caf50;
}

.left{
  width: 200px;
  height: 100%;
  background: #4a1362;
  float: left;
}

方法二：绝对定位

1、左边绝对定位，右边设置padding-left

html部分

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

css部分

.main{
  position: relative;
  width: 100%;
  height: 100%;
}
.right{
  position: relative;
  width: 100%;
  height: 100%;
  background: #4caf50;
}
.left{
  position: absolute;
  top:0;
  width: 200px;
  height: 100%;
  background: #4a1362;
  }

2，右边绝对定位，右边设置padding

html部分同上

css部分

.main{
  position: relative;
  width: 100%;
  height: 100%;
}
.right{
  position: absolute;
  padding-left: 200px;
  top:0;
  width: 100%;
  height: 100%;
  background: #4caf50;
}
.left{
  position: relative;
  width: 200px;
  height: 100%;
  background: #4a1362;
}

方法三：flex布局

html部分

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

css部分

.main{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}
.right{
  width: 100%;
  height: 100%;
  background: #4caf50;
}
.left{
  width: 200px;
  height: 100%;
  flex-shrink: 0;
  background: #4a1362;
}

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。改为0则不会因为空间不足而缩小，详见 flex布局