不使用float实现两边固定,中间自动扩展的布局
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>不使用float实现两边固定,中间自动扩展的布局</title> <style> .header{height:200px;background-color:red} .main{position:relative;zoom:1;} .main-left{position:absolute;left:0;top:0;width:300px;height:500px;background-color: yellow} .main-right{position:absolute;right:0;top:0;width:300px;height:500px;background-color: green} .main-center{height:500px;margin:0 300px;background-color: #aaaaaa} .footer{height:100px;background-color: #dddddd} </style> </head> <body> <div class="header"></div> <div class="main"> <div class="main-left">我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧</div> <div class="main-center">我是中间我是中间我是中间我是中间我是中间我是中间</div> <div class="main-right">我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧</div> </div> <div class="footer"></div> </body> </html>
负边距的”左边固定宽,右边自适应宽”。
<!DOCTYPE html> <html> <head> <style> *{margin:0px;padding:0px;} #head{ min-height:50px; width:100%; background-color: yellow; } #container { width:100%; float:right; margin-left:-200px; } #left{ width:200px; height:200px; float:left; background-color: cyan; } #right{ height:200px; margin-left:200px; background-color: red; } #right div{ width:300px; background-color: green; clear:both; } #footer{ min-height:50px; width:100%; background-color: blue; clear: both; } </style> </head> <body> <div id="head"><h1>Header</h1></div> <div id="left"><h1>Left Sidebar</h1></div> <div id="container"> <div id="right"><div><h1>Content</h1></div></div> </div> <div id="footer"><h1>Footer</h1></div> </body> </html>
CSS3中的box-flex 一侧定宽 自适应
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>box</title> <style type="text/css"> body,div{ margin: 0; padding: 0; } .box{ background-color: green; display: -moz-box; display: -webkit-box; display: box; width: 100%; } .item:first-child{ width: 200px; height: 80px; margin:10px; background-color: yellow; } .item:nth-child(2){ background-color: red; height: 80px; -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; margin: 10px 0; } .item:last-child{ background-color: orange; height: 80px; -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; margin:10px; } /*这里貌似如果.box设置了左右padding,分配宽度的时候不会减掉左右padding的部分,相当于忽略了padding效果*/ </style> </head> <body> <div class="box"> <div class="item">column 1</div> <div class="item">column 2</div> <div class="item">column 3</div> </div> </body> </html>