当前位置:Gxlcms > html代码 > 实现一个三列布局(左右侧固定,中间自适应宽度)-jimmie.Mr

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

时间:2021-07-01 10:21:17 帮助过:13人阅读

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;
}

人气教程排行