实现一个两列布局(左侧定宽,右侧自适应)

时间:2021-08-09 00:22:27

html代码:

<div class="left">固定宽度区</div>
<div class="right">自适应宽度区</div>
<div class="footer">底部区</div>

 

css代码:

/*第一种方法(浮动)*/
 .left {
  float: left;
  width: 100px;
  height: 400px;
  background-color: blue;
}

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

.footer {
  clear: both;
  background-color: yellow;
} 



/*第二种方法(相对布局)*/
.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 150px;
  background-color: blue;
}

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

.footer {
  background-color: yellow;
}


/*第三种方法(flex)*/
.left {
  float: left;
  width: 100px;
  height: 150px;
  background-color: blue;
}

.right {
  display: flex;
  flex: 1;
  height: 150px;
  background-color: green;
}

.footer {
  background-color: yellow;
}