一. 两列布局:左侧定宽、右侧自适应。
四种方法 :flex 、position、float和负外边距、外边距
1. 使用flex.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } .main{ display:flex; } .sitebar{ flex:0 0 200px; order:-1; //order属性用于更改在主轴方向上排列顺序,order数值越小,排列越靠前,默认为0,可以为负数 background-color: green; } .content{ flex:1; background-color: red; } </style> </head> <body> <div class="main"> <div class="content"> 右侧自适应区块 </div> <div class="sitebar"> 左侧定宽200px区块 </div> </div> </body> </html>
2. 使用position, 考虑了页面优化,右侧区域先加载。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } .sitebar{ 200px; background-color: green; } .content{ position: absolute; left: 200px; right:0; top:0; background-color: red; } </style> </head> <body> <div class="content"> 右侧自适应区块 </div> <div class="sitebar"> 左侧定宽200px区块 </div> </body> </html>
3. 利用float和负外边距
这里的100%是相对于父元素, margin-left的意思是子元素的左边框距离父元素右边框的距离,我这里没考虑padding,border等因素哈
当设置left元素的margin-left:-100%;时,left元素的左边框会与父元素的左边框重合。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding:0; } .main { 100%; float:left; } .main .content { margin-left: 200px; background-color: red; } .sitebar { 200px; float: left; background-color: green; margin-left: -100%; } </style> </head> <body> <div class="main"> <div class="content"> 右侧自适应区块 </div> </div> <div class="sitebar"> 左侧定宽200px </div> </body> </html>
二、三列布局:左右定宽,中间自适应。
圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局。
三种方法:flex、绝对定位、使用负外边距。
1. flex
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .body{ display:flex; } .content{ flex:1; background-color: green; } .nav, .ads{ /*//设置两个侧边栏宽度*/ flex:0 0 200px; background-color: blue; } .nav { /* 把导航放到最左边*/ order:-1; background-color: grey; } </style> </head> <body> <div class="body"> <main class="content">center</main> <nav class="nav">left</nav> <aside class="ads">right</aside> </div> </body> </html>
2. 绝对定位
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { margin: 0px; } .left { background-color: red; 100px; position: absolute; top: 0px; left:0px; } .center { background-color: grey; margin-left: 100px; margin-right: 100px; } .right { background-color: green; 100px; position: absolute; top:0px; right:0px; } </style> </head> <body> <div class="center">中间</div> <div class="left">左列</div> <div class="right">右列</div> </body> </html>
三、两列等高布局。
利用padding-bottom的正值与margin-bottom的负值相互抵消即可,同时最外层设置overflow:hidden;即可
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .main { margin: 0 auto; overflow: hidden; 600px; } .left { background-color: red; 300px; float:left; padding-bottom: 2000px; margin-bottom: -2000px; } .right { background-color: green; 300px; float:left; padding-bottom: 2000px; margin-bottom: -2000px; } </style> </head> <body> <div class="main"> <div class="left"> <p style="height:200px">left</p> </div> <div class="right"> <p style="height:300px">right</p> </div> </div> </body> </html>