圣杯布局方法 - 冰～ice

（1）三列，左右列宽度固定，中间列宽度适应屏幕（不等高）

　　body{min-width:430px;}为body设置一最小宽度（不小于（left宽+right宽）），可保持页面缩小时不会错位。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>布局一</title>
<style>
*{margin:0;padding:0;}
body{min-width:430px;font-size:12px;}
.fl{float:left;}
.fr{float:right;}
.main{background:#D6D6D6;}
.left{background:#E79F6D;}
.right{background:#7BD;}
.main{overflow:hidden;zoom:1;margin-right:230px;}
.left{width:190px;}
.right{width:230px;}
  </style>
</head>
<body>
 <div id="bd">
        <div class="left fl">test1llllLLLLLL1</div>
        <div class="right fr">test11111111111RRRRR<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/></div>
        <div class="main">
            test11111111111CCCC<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/><br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>
        </div>
  </div>
</body>
</html>

效果如下：

（2）结合多列的自适应等高(padding与margin的抵消法)扩展为“三列自适应等高且中列宽度自适应布局”

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>布局一</title>
<style>
*{margin:0;padding:0;}
body{min-width:430px;font-size:12px;}
.fl{float:left;}
.fr{float:right;}
.main{background:#D6D6D6;}
.left{background:#E79F6D;}
.right{background:#7BD;}
#bd{overflow:hidden;zoom:1;}
.main{overflow:hidden;zoom:1;margin-right:230px;}
.left{width:190px;}
.right{width:230px;}
.row{margin-bottom:-10000px;padding-bottom:10000px;}
  </style>
</head>
<body>
 <div id="bd">
        <div class="left row fl">test1llllLLLLLL1</div>
        <div class="right row fr">test11111111111RRRRR<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/></div>
        <div class="main row">
            test11111111111CCCC<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/><br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>
        </div>
  </div>
</body>
</html>

效果如下：

以上两种方法相对于这种布局来说是比较简洁的。
但这种方法是以牺牲“合理的页面顺序”为代价的。
即左右列的顺序移到中间列上面来了。

考虑页面顺序的方法：

（3）左右两列靠父级的border模拟（代价太大）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>布局一</title>
<style>
*{margin:0;padding:0;}
body{min-width:430px;font-size:12px;}
.fl{float:left;}
.fr{float:right;}
.main{background:#D6D6D6;}
.left{background:#E79F6D;}
.right{background:#7BD;}
#bd{zoom:1;position:relative;border-left:190px solid #E79F6D;border-right:230px solid #7BD;}
.main{padding:0 10px;}
.left{width:190px;position:absolute;left:-190px;top:0;}
.right{width:230px;position:absolute;right:-230px;top:0;}
  </style>
</head>
<body>
 <div id="bd">
        <div class="main">
            test11111111111CCCC<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/><br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>
        </div>
        <div class="left">test1llllLLLLLL1</div>
        <div class="right">test11111111111RRRRR<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/></div>
  </div>
</body>
</html>

效果如下：

（4）中间列多嵌套了一层div

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>布局一</title>
<style>
*{margin:0;padding:0;}
body{min-width:430px;font-size:12px;}
.fl{float:left;}
.fr{float:right;}
#bd{overflow:hidden;}
.main{width:100%;background:#D6D6D6;}
.left{width:190px;margin-left:-100%;background:#E79F6D;}
.right{width:230px;margin-left:-230px;background:#7BD;}
.row{float:left;padding-bottom:10000em;margin-bottom:-10000em;}
.box{margin:0 230px 0 190px;}
  </style>
</head>
<body>
 <div id="bd">
        <div class="main row">
            <div class="box">
                test11111111111CCCC<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/><br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>
            </div>
        </div>
        <div class="left row">test1llllLLLLLL1</div>
        <div class="right row">test11111111111RRRRR<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/></div>
  </div>
</body>
</html>

效果如下：

（5）全部背景色套层模拟方法

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>布局一</title>
<style>
*{margin:0;padding:0;}
body{min-width:430px;font-size:12px;}
.fl{float:left;}
.fr{float:right;}
#bd{overflow:hidden;}
.innerCont{margin-left:190px;}
.conent{margin-right:230px;}
.content:after {content:'';display:block;clear:both;}
.main{width:100%;background:#D6D6D6;overflow:hidden;}
.left{width:190px;margin-left:-190px;left:-100%;position:relative;background:#E79F6D;}
.right{width:230px;margin-right:-230px;background:#7BD;}
.row{float:left;}
  </style>
</head>
<body>
 <div id="bd">
     <div class="innerCont">
         <div class="conent">
            <div class="main row">
                test11111111111CCCC<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/><br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>
            </div>
            <div class="left row">test1llllLLLLLL1</div>
            <div class="right row">test11111111111RRRRR<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/>1111<br/></div>
        </div>
    </div>
</div>
</body>
</html>

效果如下：

posted on 2014-10-21 17:29 冰～ice 阅读(354) 评论(0) 编辑收藏举报