3 列レイアウトの実装 (左右固定、中央の幅に適応)_html/css_WEB-ITnose

html コード (最初と 2 番目のメソッド):

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

2 番目の方法(フローティング):

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

3 番目の方法 (負のマージン):

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