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

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

php中文网

发布： 2016-05-20 16:51:05

原创

1202人浏览过

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

<span style="color: #0000ff;"><</span><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><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><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>

登录后复制

Sora

Sora是OpenAI发布的一种文生视频AI大模型，可以根据文本指令创建现实和富有想象力的场景。

538

查看详情

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

登录后复制

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

登录后复制