---------X軸可帶滾動條三段身佈局------------------------------
*{margin: 0; padding: 0;}
html,body{width: 100%;height: 100%;}.header{width: 100%; height: 80px; border: solid 1px #ccc;margin:0;}
.body>.nav{width: 200px; position:absolute;top:80px;left: 0;bottom:0;}
.body>.homeCont{position:absolute;top:80px;left: 200px;bottom:0;right: 0;overflow:auto;}
---------兩列布局--------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.box{
width: 100%;height: 500px;
}
.left{
width: 100px;height: 100%;float:left;background-color: skyblue;
}
.right{
width:100%;height: 100%;background-color:red;
//margin-left:120px;
}
</style></head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
------------------------三列布局--------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;padding: 0;
}
.box{
width: 100%;height: 500px;
}
.left{
width: 100px;height: 100%;float:left;background-color: skyblue;
}
.right{
width: 100px;height: 100%;float:right;background-color: skyblue;
}
.main{
height: 100%; background-color: red;margin:0 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div> //注意 中間盒子放最後
</div>
</body>
</html>