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

html代码(第一二种方法):

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span>左侧固定区<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>右侧固定区<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="mid"</span><span style="color: #0000ff;">></span>中间自适应区<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>

 

css代码：

第一种方法（定位）：

<span style="color: #800000;">.left </span>{<span style="color: #ff0000;">
  position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
  top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> red</span>;
 }<span style="color: #800000;">

 .mid </span>{<span style="color: #ff0000;">
  margin-left</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
  margin-right</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> blue</span>;
 }<span style="color: #800000;">

 .right </span>{<span style="color: #ff0000;">
  position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
  top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  right</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> yellow</span>;
 }

 

第二种方法（浮动）：

<span style="color: #800000;">.left </span>{<span style="color: #ff0000;">
 float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
 width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
 height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
 background-color</span>:<span style="color: #0000ff;"> red</span>;
}<span style="color: #800000;">

.mid </span>{<span style="color: #ff0000;">
 height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
 background-color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">

.right </span>{<span style="color: #ff0000;">
 float</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;">
 width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
 height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
 background-color</span>:<span style="color: #0000ff;"> yellow</span>;
}

 

第三种方法（负边距）：

html代码：

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center fl"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="mid"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
     中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区
  </span><span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left fl"</span><span style="color: #0000ff;">></span>左边固定区<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right fl"</span><span style="color: #0000ff;">></span>右边固定区<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span>

 

css代码：

<span style="color: #800000;">.fl </span>{<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;"> left</span>; }<span style="color: #800000;">

.center </span>{<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> yellow</span>;
}<span style="color: #800000;">
  .center .mid</span>{<span style="color: #ff0000;">
    margin-right</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0 110px</span>;
  }<span style="color: #800000;">

.left</span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -100%</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> green</span>;
}<span style="color: #800000;">

.right</span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -200px</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> blue</span>;
}