1）用BDC實作分2欄：右欄自适應
<style>
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
.box{
width:100%;
height:100%;
background:orange;
}
.left{
width:200px;
height:100%;
background:pink;
/* 浮動 */
float:left;
}
.right{
height:100%;
background:green;
/* bfc區域不會與浮動盒子重疊 */
overflow:hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">111111111</div>
</div>
</body>
2）彈性盒實作中間一欄自适應
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
width: 100%;
}
body{
display: flex;
}
nav{
background-color: tomato;
width: 200px;
}
section{
background-color: thistle;
flex: 1;
}
aside{
background-color: teal;
width: 100px;
}
</style>
</head>
<body>
<nav></nav>
<section></section>
<aside></aside>
</body>
3）用BFC實作分3欄，中間一欄自适應
<style>
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
.box{
width:100%;
height:100%;
background:purple;
}
.left{
width:200px;
height:100%;
float:left;
background:pink;
}
.center{
height:100%;
background:green;
overflow:hidden;
}
.right{
width:200px;
height:100%;
float:right;
background:#dd0;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
<!-- 自适應的一欄一定要寫在最後-->
</div>
</body>
4）用padding實作分三欄，中間一欄自适應
<style>*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
.box{
width:100%;
height:100%;
background:purple;
}
.left{
width:200px;
height:100%;
background:pink;
float:left;
}
.right{
width:200px;
height:100%;
background:#dd0;
float:right;
}
/* 中間的闆塊 */
.center{
height:100%;
background:red;
/* 用padding 把center的子元素擠到中間 */
padding:0 200px;
}
.center-con{
height:100%;
background:#ccc;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<div class="center-con"></div>
</div>
</div>
</body>
5）用margin實作分3欄，中間一欄自适應
<style>
*{
margin:0;
padding:0;
}
body,html{
height:100%;
}
.box{
width:100%;
height:100%;
background:grey;
}
.left{
width:200px;
height:90%;
background:pink;
float:left;
}
.right{
width:200px;
height:90%;
background:blue;
float:right;
}
.center{
height: 100%;
background:#dd0;
margin:0 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
![【CSS3】設定超連結樣式超連結樣式[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)