一栏固定一栏自适应
实现代码:
- <!DOCTYPE html>
- <html>
- <head>
- <title>自适应布局-一栏固定一栏自适应</title>
- <meta charset="utf-8">
- <style type="text/CSS">
- *{
- padding: 0;
- margin: 0;
- }
- #left{
- height: 600px;
- width: 200px;
- float: left;
- background-color: #fffc00;
- }
- #main{
- height: 600px;
- width: auto;
- background-color: #03c03c;
- }
- </style>
- </head>
- <body>
- <div id="left">left 固定宽度</div>
- <div id="main">main 自适应宽度</div>
- </body>
- </html>
左右两栏固定,中间自适应
自身浮动法的原理就是使用对左右使用分别使用float:left和float:right,float使左右两个元素脱离文档流,中间元素正常在正常文档流中,使用margin指定左右外边距对其进行一个定位。
- <!DOCTYPE html>
- <html>
- <head>
- <title>自适应布局</title>
- <meta charset="utf-8">
- <style type="text/css">
- *{
- padding: 0;
- margin: 0;
- }
- #container{
- width: 100%;
- margin: 0 auto;
- }
- #left{
- width: 200px;
- height: 600px;
- float: left;
- background-color: #fffc00;
- }
- #right{
- width: 100px;
- height: 600px;
- float: right;
- background-color: orange;
- }
- #main{
- height: 600px;
- margin-left: 0 100px 0 200px;
- background-color: #03c03c;
- }
- </style>
- </head>
- <body>
- <div id="container">
- <div id="left">left 200px</div>
- <div id="right">right 100px</div>
- <div id="main">main 自适应</div>
- </div>
- </body>
- </html>
绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin属性,留出左右元素的宽度,既可以使中间元素自适应屏幕宽度。
- <!DOCTYPE html>
- <html>
- <head>
- <title>自适应布局</title>
- <meta charset="utf-8">
- <style type="text/css">
- *{
- padding: 0;
- margin: 0;
- }
- #left{
- width: 200px;
- height: 600px;
- position: absolute;
- top: 0;
- left: 0;
- background-color: #fffc00;
- }
- #right{
- width: 100px;
- height: 600px;
- position: absolute;
- top: 0;
- right: 0;
- background-color: orange;
- }
- #main{
- height: 600px;
- position: absolute;
- left: 200px;
- right: 100px;
- top: 0;
- background-color: #03c03c;
- }
- </style>
- </head>
- <body>
- <div id="left">left 200px</div>
- <div id="right">right 100px</div>
- <div id="main">main 自适应</div>
- </body>
- </html>
圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div,包含div需要设置float属性使其形成一个BFC,并设置宽度,并且这个宽度要和left块的margin负值进行配合,具体原理参考这里。这里对圣杯布局解释特别详细。
- <!DOCTYPE html>
- <html>
- <head>
- <title>自适应布局</title>
- <meta charset="utf-8">
- <style type="text/css">
- *{
- padding: 0;
- margin: 0;
- }
- #wrap{
- width: 100%;
- float: left;
- }
- #main{
- height: 600px;
- margin: 0 100px 0 200px;
- background-color: #03c03c;
- }
- #left{
- width: 200px;
- height: 600px;
- float: left;
- margin-left: -100%;
- background-color: #fffc00;
- }
- #right{
- width: 100px;
- height: 600px;
- float: left;
- margin-left: -100px;
- background-color: orange;
- }
- </style>
- </head>
- <body>
- <div id="wrap">
- <div id="main">main 自适应</div>
- </div>
- <div id="left">left 200px</div>
- <div id="right">right 100px</div>
- </body>
- </html>
- <!DOCTYPE html>
- <html>
- <head>
- <title>自适应布局</title>
- <meta charset="utf-8">
- <style type="text/css">
- *{
- padding: 0;
- margin: 0;
- }
- #container{
- width: 100%;
- display: -webkit-flex;
- display: -moz-flex;
- display: -ms-flex;
- display: -o-flex;
- display: flex;
- }
- #left{
- width: 200px;
- height: 600px;
- background-color: #fffc00;
- }
- #main{
- width: auto;
- height: 600px;
- background-color: #03c03c;
- -webkit-flex: 1;
- -moz-flex: 1;
- -ms-flex: 1;
- -o-flex: 1;
- flex: 1;
- }
- #right{
- width: 100px;
- height: 600px;
- background-color: orange;
- }
- </style>
- </head>
- <body>
- <div id="container">
- <div id="left">left 200px</div>
- <div id="main">main 自适应</div>
- <div id="right">right 100px</div>
- </div>
- </body>
- </html>
来源: http://www.cnblogs.com/dragonir/p/7744192.html