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

CSS + DIV 经典布局，DIV统一自适应高度

2012-11-08 11:27 513 查看

CSS + DIV 经典布局，DIV统一自适应高度

布局：

左右栏宽多固定，中间栏宽度自适应；

各栏高度统一自适应；

代码：

<!DOCTYPE HTML>
<html>
<head>

</head>

<style>
#wrap {
overflow: hidden;
}

div {
word-wrap: break-word;
}
#left {
background: red;
float: left;
width: 200px;
}
#center {
background: green;
margin: 0 200px 0 200px;
}
#right {
background: blue;
float: right;
width: 200px;
}
#left, #right, #center {
padding-bottom: 100000px;
margin-bottom: -100000px;
}
</style>

<body>
<div id="wrap">
<div id="left">
leftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleft
</div>

<div id="right">
rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
</div>
<div id="center">
centercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercenter
</div>
</div>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航