Heim > Web-Frontend > HTML-Tutorial > 实现一个三列布局(左右侧固定,中间自适应宽度)_html/css_WEB-ITnose

实现一个三列布局(左右侧固定,中间自适应宽度)_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:20:56
Original
1491 Leute haben es durchsucht

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

<div class="left">左侧固定区</div><div class="right">右侧固定区</div><div class="mid">中间自适应区</div>
Nach dem Login kopieren

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; }
Nach dem Login kopieren

第二种方法(浮动):

.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;}
Nach dem Login kopieren

第三种方法(负边距):

html代码:

<div class="center fl">  <div class="mid">     中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区  </div></div><div class="left fl">左边固定区</div><div class="right fl">右边固定区</div>
Nach dem Login kopieren

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;}
Nach dem Login kopieren

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage