实现三栏自适应布局
2019-08-19 本文已影响0人
Camilia_yang
基于传统的position和margin等属性进行布局
这里也分成三种方法：绝对定位法，自身浮动法，圣杯布局
绝对定位法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h3>实现三栏宽度自适应布局</h3>
<div id="left">我是左边</div>
<div id="right">我是右边</div>
<div id="center">我是中间</div>
</body>
</html>
html,body{margin:0;width:100%;}
h3{
height:100px;margin:20px 0 0;
}
#left,#right{width:200px;height:200px;border:1px solid black;
background-color:#ffe6d8;position:absolute;top:120px;
}
#left{left:0;}
#right{right:0;}
#center{
margin:2px 210px;background:#eee;height:200px;
}
示例
