两栏布局,三栏布局,等高布局,流式布局

读前笑一笑:

我前面一女生平胸,然后我问她哪天你晚上自己回家,被劫色怎么办…?
她淡淡的回了句:“我就脱了上衣,然后说,别激动,是自己人”……自己人……己人…人…

两栏布局:

1. float+margin(一侧定宽,一侧自动)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> 左定宽,右自动 </title>
<style type="text/css">
html,body{margin:0; padding: 0;}
.m-box .left,.m-box .right { height: 200px; line-height:200px; text-align:center; }

.m-box .left{float:left; width:200px; background-color:#ccc; }
.m-box .right{margin-left:210px;  background-color:#666;}
</style>
</head>
<body>
<div class="m-box">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>
View Code

2.position+margin(一侧定宽,一侧自动)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> 左定宽,右自动 </title>
<style type="text/css">
html,body{margin:0; padding: 0;}
.m-box .left,.m-box .right { height: 200px; line-height:200px; text-align:center; }

.m-box .left{position: absolute; width:200px; background-color:#ccc; }
.m-box .right{margin-left:210px;  background-color:#666;}
</style>
</head>
<body>
<div class="m-box">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>
View Code

3.float+负margin(一侧定宽,一侧自动)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> 左定宽,右自动 </title>
<style type="text/css">
html,body{margin:0; padding: 0;}
.m-box .cont,.m-asider { height: 200px; line-height:200px; text-align:center; }

.m-box { float:left; width: 100%;}
.m-box .cont {margin-left:210px;background-color: #ccc;}
.m-asider {float: left; width: 200px; margin-left: -100%; background-color: #ccc;}
</style>
</head>
<body>
<div class="m-box">
    <div class="cont"></div>
</div>
<div class="m-asider"></div>
</body>
</html>
View Code

 三栏布局:

1.float+margin(两侧定宽,中间自适应)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> 左右固定,中间自适应 </title>
<style type="text/css">
html,body{margin:0; padding: 0;}
.left,.right,.center { height: 200px; line-height:200px; text-align:center; }

.left {float:left; width: 200px; background-color: #ccc;}
.right {float:right; width: 200px; background-color: #ccc;}
.center { margin: 0 210px; background-color: #666;}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>
View Code

2.position+margin(两侧定宽,中间自适应)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> 左右固定,中间自适应 </title>
<style type="text/css">
html,body{margin:0; padding: 0;}
.left,.right,.center { height: 200px; line-height:200px; text-align:center; }

.left {position:absolute; top:0; left:0; width: 200px; background-color: #ccc;}
.right {position:absolute; top:0; right:0;  width: 200px; background-color: #ccc;}
.center { margin: 0 210px; background-color: #666;}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>
View Code

3.float+负margin(两侧定宽,中间自适应)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> 三列布局 </title>
<style type="text/css">
html,body{margin:0; padding: 0;}
.left,.right,.m-box .center { height: 200px; line-height:200px; text-align:center; }

.m-box { float:left; width: 100%;}
.m-box .center {margin:0 210px;background-color: #666;}
.left,.right {float: left; width: 200px; margin-left: -100%; background-color: #ccc;}
.right {margin-left: -200px;}
</style>
</head>
<body>
<div class="m-box">
    <div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
View Code

4.float+position+margin(两侧自动,中间定宽)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> 三列布局 </title>
<style type="text/css">
html,body{margin:0; padding: 0;}

.m-box{ height: 200px; line-height:200px; text-align:center; background-color: #ccc;}
.warp1{float:left; width:50%;_margin-right:-3px;}
.warp2{margin-left:50%; text-align:right; _margin-left:0; _zoom:1;}
.m-box1{ margin-right:100px;}
.m-box2{margin-left:100px;}
.m-box3{ background:red;width:200px; position:absolute; left:50%; margin-left:-100px; top:0; z-index:2;}
</style>
</head>
<body>
<div class="warp1">
    <div class="m-box m-box1"></div>
</div>
<div class="warp2">
    <div class="m-box m-box2"></div>
</div>
<div class="m-box m-box3"></div>
</body>
</html>
View Code

5.position+margin(两侧自动,中间定宽)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>三栏布局</title>
<style type="text/css">
html,body{margin:0; padding: 0;}
.main,.m-center { height: 200px; line-height:200px; text-align:center; }

.m-center { z-index: 2; background-color: #666; width: 500px; margin-left: -250px; position: absolute; top: 0; left: 50%; }
.left, .right { z-index: 1; position: absolute; top: 0; width: 50%; }
.left { left: 0; }
.left .main { margin-right: 250px; background-color: #ccc; }
.right { right: 0; }
.right .main { margin-left: 250px; background-color: #ccc; }
</style>
</head>
<body>
<div class="m-center"></div>
<div class="left">
    <div class="main"></div>
</div>
<div class="right">
    <div class="main"></div>
</div>
</body>
</html>
View Code

等高布局:

1.float+margin+position(两列等高布局) 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两列等高布局</title>
<style type="text/css">
html,body{margin:0; padding: 0;}
.clearfix { zoom: 1 }
.clearfix:after { content: ""; display: block; height: 0; line-height: 0; font-size: 0; visibility: hidden; clear: both; }

.wrap { width: 950px; margin: 0 auto; background: #ccc; }
.content { margin-left: 150px; border-left: 1px solid #666; background: #ddd; }
.main { float: left; width: 100%; }
.side { float: left; width: 150px; margin-left: -950px; position: relative; }
</style>
</head>
<body>
<div class="wrap">
    <div class="content clearfix">
        <div class="main">
            中-等高吗?<br />
            中-等高吗?<br />
            中-等高吗?<br />
            中-等高吗?<br />
            中-等高吗?<br />
        </div>
        <div class="side">
            左-等高吗?<br />
        </div>
    </div>
</div>
</body>
</html>
View Code

2.float+position(三列等高布局)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自适应高布局</title>
<style type="text/css">
html,body{margin:0; padding: 0;}

.fl { float: left; }
.container3 { background:green; overflow: hidden; position: relative; }
.container2 { background:yellow; position: relative; right: 30%; }
.container1 { width: 100%; background:red; position: relative; right: 40%; }
.col1 { width: 26%; position: relative; left: 72%; overflow: hidden; }
.col2 { width: 36%; position: relative; left: 76%; overflow: hidden; }
.col3 { width: 26%; position: relative; left: 80%; overflow: hidden; }
</style>
</head>
<body>
<div class="container3 fl">
    <div class="container2 fl">
        <div class="container1 fl">
            <div class="col1 fl"><br/>小时候我有一个梦想,长大了我就忘了...</div>
            <div class="col2 fl"><br/>小时候我有一个梦想,长大了我就忘了...小时候我有一个梦想,长大了我就忘了...</div>
            <div class="col3 fl"><br/>小时候我有一个梦想,长大了我就忘了...小时候我有一个梦想,长大了我就忘了...小时候我有一个梦想,长大了我就忘了...</div>
        </div>
    </div>
</div>
</body>
</html>
View Code

流式布局 

1.float

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>流式布局</title>
<style type="text/css">
html,body,p{margin:0; padding: 0;}
.box { width: 340px; border: 1px #c2c2c2 solid; margin: 0 auto;  overflow: hidden; }
.box .list { float: left; width: 100px; margin: 10px 0 0 10px;  }
p { background-color: gray; margin-bottom: 10px; }
.p1 { height: 100px; }
.p2 { height: 125px; }
.p3 { height: 150px; }
.p4 { height: 200px; }
</style>
</head>
<body>
<div class="box">
   <div class="list">
       <p class="p4">4</p>
       <p class="p1">1</p>
       <p class="p3">3</p>
       <p class="p2">2</p>
       <p class="p4">4</p>
       <p class="p1">1</p>
       <p class="p3">3</p>
       <p class="p2">2</p>
   </div>
   <div class="list">
       <p class="p2">2</p>
       <p class="p4">4</p>
       <p class="p3">3</p>
       <p class="p1">1</p>
       <p class="p2">2</p>
       <p class="p4">4</p>
       <p class="p3">3</p>
       <p class="p1">1</p>
   </div>
   <div class="list">
       <p class="p4">4</p>
       <p class="p1">1</p>
       <p class="p2">2</p>
       <p class="p3">3</p>
       <p class="p4">4</p>
       <p class="p1">1</p>
       <p class="p2">2</p>
       <p class="p3">3</p>
   </div>
</div>
</body>
</html>
View Code

2.position

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>流式布局</title>
<style type="text/css">
html,body,p { margin: 0; padding: 0; }
#box { position: relative; width: 360px; height: 400px; background-color: #f2f2f2; overflow: auto; margin: 0 auto; }

p { position: absolute; top: 0; left: 0; width: 100px; background-color: gray; }
.p1 { height: 100px; }
.p2 { height: 125px; }
.p3 { height: 150px; }
.p4 { height: 200px; }
</style>
</head>
<body>
<div id="box">
    <p class="p3">3</p>
    <p class="p2">2</p>
    <p class="p1">1</p>

    <p class="p2">2</p>
    <p class="p3">3</p>
    <p class="p4">4</p>

    <p class="p3">3</p>
    <p class="p2">2</p>
    <p class="p1">1</p>

    <p class="p2">2</p>
    <p class="p3">3</p>
    <p class="p4">4</p>
</div>
<script type="text/javascript">
var oBox = document.getElementById("box");
var aList = oBox.getElementsByTagName("p");
for(var i = 0, len = aList.length; i < len; i += 1)
{
    var iCol = 3,iNum = i%iCol,iMargin = 10;
    aList[i].style.left = (iNum+1)*iMargin+parseInt(aList[0].offsetWidth*iNum, 10)+"px";

    if(i >= iCol){
        aList[i].style.top = aList[i-iCol].offsetHeight+aList[i-iCol].offsetTop+iMargin+"px";
    }
}
</script>
</body>
</html>
View Code

 

posted @ 2013-09-24 17:15  小七丶  阅读(7688)  评论(5编辑  收藏  举报