您的位置：首页 > Web前端 > JavaScript

如何利用CSS+DIV 实现三列自适应高和宽的布局（不用javascript）

2011-07-12 20:05 1041 查看

需求：

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航