欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

实现一个三列布局(左右侧固定,中间自适应宽度) - jimmie.Mr

程序员文章站 2022-04-23 18:58:03
...
html代码(第一二种方法):
div class="left">左侧固定区div>
div class="right">右侧固定区div>
div class="mid">中间自适应区div>

css代码:

第一种方法(定位):

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 200px;
  background-color: red;
 }

 .mid {
  margin-left: 100px;
  margin-right: 200px;
  height: 200px;
  background-color: blue;
 }

 .right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background-color: yellow;
 }

第二种方法(浮动):

.left {
 float: left;
 width: 100px;
 height: 200px;
 background-color: red;
}

.mid {
 height: 200px;
 background-color: blue;
}

.right {
 float: right;
 width: 200px;
 height: 200px;
 background-color: yellow;
}

第三种方法(负边距):

html代码:

div class="center fl">
  div class="mid">
     中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区
  div>
div>

div class="left fl">左边固定区div>

div class="right fl">右边固定区div>

css代码:

.fl { float: left; }

.center {
  width: 100%;
  height: 200px;
  background: yellow;
}
  .center .mid{
    margin-right: 100px;
    padding: 0 110px;
  }

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

.right{
    margin-left: -200px;
    width: 200px;
    height: 200px;
    background: blue;
}