关于左右两列布局和上下两列布局的解决方案
效果:
左边固定宽度, 右边宽度自适应
右边容器中上边固定高度, 下边高度自适应
实现方法及原理:
1 左边高度100%, 固定宽度, 设置为左浮动布局
2 右边设置overflow为hidden, 开启BFC, 消除浮动对布局的影响, 利用宽度自动扩张, 是其宽度自适应
3 右边容器中, 固定上层容器的高度
4 将下层的元素设置为怪异盒模型, 并设置padding-bottom为上层容器的高度
代码实现如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 .wrapper{ 8 height: 500px; 9 width: 500px; 10 position: relative; 11 background: pink; 12 } 13 .left{ 14 height: 500px; 15 width: 150px; 16 float: left; 17 background: yellowgreen; 18 } 19 .right{ 20 height: 100%; 21 overflow: hidden; 22 background: yellow; 23 } 24 .top{ 25 height: 150px; 26 background: pink; 27 } 28 .bottom{ 29 height: 100%; 30 padding-bottom: 150px; 31 box-sizing: border-box; 32 background: blue; 33 } 34 35 </style> 36 </head> 37 <body> 38 <div class="wrapper"> 39 <div class="left"></div> 40 <div class="right"> 41 <div class="top"></div> 42 <div class="bottom"></div> 43 </div> 44 </div> 45 </body> 46 </html>
