需求:
请用div+css自适应浏览器宽度和高度的水平三列布局,左右两列宽度均为为100px,html结构如下(可以适当修改结构):
<body>
<div class="left"></div><div class="center"></div><div class="right"></div></body>请写出CSS代码。
实现:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 测试3列布局 </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> .divall{ width:100%; position:relative; height:100%; overflow:auto; } .main{ width:100%; position:absolute; left:0px; top:0px; height:100%; } .sclasser_a{ width:100px; position:absolute; left:0px; top:0px; background-color:#5b49a2; height:100%; z-index:1; } .sclasser_b{ width:100px; position:absolute; right:0px; top:0px; background-color:#5b49a2; height:100%; } .dv_content{ width:100%; margin-left:100px; margin-right:100px; height:100%; background-color:#CCCCCC; } </style> </HEAD> <BODY> <div class="divall"> <div class="sclasser_a">11111111</div> <div class="main"> <div class="dv_content"> 2222222 </div> </div> <div class="sclasser_b">333333333333333</div> </div> </BODY> </HTML>