CSS实现两边宽度固定中部自适应的三列布局

序：前两天在项目的页面中，用到了这种布局，觉得还是有些代表性的，分享一下，老鸟略过！

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>This is Title</title>
    <style type="text/css">
    * { margin: 0; padding: 0;}
    div { text-align: center;}
    .header { width: 100%; height: 120px; background: #999;}
    .leftbar,.rightbar { background: #ddd; position: absolute; top: 120px; bottom: 0;}
    .leftbar { width: 100px; left: 0;}
    .rightbar { width: 80px; right: 0;}
    .middle { height: 100%; margin: 0 60px 0 80px;}
    </style>
</head>
<body>
    <div class="header">header</div>
    <div class="leftbar">leftbar</div>
    <div class="rightbar">rightbar</div>
    <div class="middle">middle</div>
</body>
</html>

关键点：将两边列设置为position:absolute用于脱离文档流，而中间列设置左右的margin值，非常的简单
PS：当然，还可以试着把两边的position设置为fixed，也会是一个不错的效果哦 ^_^

作者：@zhnoah
出处：http://www.cnblogs.com/zhnoah/

接，否则保留追究法律责任的权利。

相关文章：

你感兴趣的文章：

标签云：