左侧固定,右侧自适应的布局
Posted lxw210
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了左侧固定,右侧自适应的布局相关的知识，希望对你有一定的参考价值。
1.左侧盒子: 通过子绝父相定位,宽度固定; 右侧盒子: 宽度100%,再设置margin-left为左侧盒子的宽度大小
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 * { 11 margin: 0; 12 padding: 0; 13 } 14 .cont{ 15 position: relative; 16 } 17 .left { 18 width: 100px; 19 height: 600px; 20 position: absolute; 21 left:0; 22 top:0; 23 background: blue; 24 } 25 26 .right { 27 margin-left: 100px; 28 height: 400px; 29 background: pink; 30 } 31 </style> 32 </head> 33 34 <body> 35 <div class="cont clearfix"> 36 <div class="left"></div> 37 <div class="right"></div> 38 </div> 39 </body> 40 41 </html>
2.左侧盒子: 左浮动; 右侧盒子: 左浮动,再通过calc计算宽度
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 .clearfix{overflow:hidden;_zoom:1;} 14 .left{ 15 width:100px; 16 height:200px; 17 background:pink; 18 float: left; 19 } 20 .right{ 21 width:calc(100% - 100px); 22 height:300px; 23 background:blue; 24 float: left; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="cont clearfix"> 30 <div class="left"></div> 31 <div class="right"></div> 32 </div> 33 </body> 34 </html>
3.左侧盒子: float: left; 右侧盒子: margin-left
理解: 浮动会使得元素脱离文档流，后面元素进行布局时，前面的浮动元素就像不存在一样
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 .clearfix{ 14 overflow:hidden; 15 _zoom:1; 16 } 17 .left{ 18 width:100px; 19 height:200px; 20 float: left; 21 background:blue; 22 } 23 .right{ 24 margin-left:100px; 25 height:400px; 26 background:pink; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="cont clearfix"> 32 <div class="left"></div> 33 <div class="right"></div> 34 </div> 35 </body> 36 </html>
4.包含左右盒子的大盒子: display: table; 宽度为100%; 左侧和右侧盒子: display: table-cell
理解: 表格中的单元格的特性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 .cont{ 14 display: table; 15 width:100%; 16 } 17 .left,.right{ 18 display:table-cell; 19 } 20 .left{ 21 width:100px; 22 height:200px; 23 background:pink; 24 } 25 .right{ 26 height:300px; 27 background:blue; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="cont"> 33 <div class="left"></div> 34 <div class="right"></div> 35 </div> 36 </body> 37 </html>
5.左侧 右侧: 定位
理解: position:absolute;的流体性 一个盒子设置为: position:absolute; left:0; right:0; top:0; bottom:0; 会出现全屏的效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 .left{ 11 position: absolute; 12 left:0; 13 top:0; 14 bottom:0; 15 width:200px; 16 background:blue; 17 } 18 .right{ 19 position:absolute; 20 left:200px; 21 right:0; 22 top:0; 23 bottom:0; 24 background:red; 25 } 26 </style> 27 </head> 28 29 <body> 30 <div class="left"></div> 31 <div class="right"></div> 32 </body> 33 34 </html>
6.flex布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 *{ 11 margin:0; 12 padding:0; 13 } 14 .cont{ 15 display: flex; 16 } 17 .left { 18 flex-basis: 200px;/*属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。*/ 19 height:200px; 20 background: blue; 21 } 22 23 .right { 24 flex-grow:1;/*属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）*/ 25 height:300px; 26 background: red; 27 } 28 </style> 29 </head> 30 31 <body> 32 <div class="cont"> 33 <div class="left"></div> 34 <div class="right"></div> 35 </div> 36 </body> 37 38 </html>
7. BFC
(1)BFC触发的条件：
- 根元素
- 浮动元素
- 绝对定位元素、固定定位元素
- display属性为inline-block,table-caption,table-cell
- overflow:hidden;
(2)BFC的五大特性：
- 在一个bfc内部，盒子会在垂直方向上一个接一个的排列
- 在一个bfc内部，相邻的margin-top和margin-bottom会叠加
- 在一个bfc内部，每一个元素的左外边界会紧贴着包含盒子的左边，即使存在浮动也是如此
- 在一个bfc内部，如果存在内部元素是一个新的bfc,并且存在内部元素是浮动元素，则该bfc的区域不会与float元素的区域重叠
- bfc就是页面上的一个隔离的盒子，该盒子内部的子元素不会影响到外面的元素
(3)BFC的用途：
- 创建bfc避免垂直外边距叠加
- 清除浮动
- 自适应
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 .clearfix{overflow:hidden;_zoom:1;} 10 .left{ 11 width:200px; 12 height:300px; 13 background:pink; 14 float: left; 15 } 16 .right{ 17 overflow: hidden; 18 background:blue; 19 height:500px; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="cont clearfix"> 25 <div class="left"></div> 26 <div class="right"></div> 27 </div> 28 </body> 29 </html>
8.左右盒子为inline-block + 右侧calc
理解:
- vertical-align避免基线对齐造成空白
- font-size:0;避免空白字符的存在，使得整个宽大于100%，造成右边的div掉下来
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 .cont{ 14 font-size: 0; 15 } 16 .left,.right{ 17 display:inline-block; 18 vertical-align: top; 19 } 20 .left{ 21 width:100px; 22 height:200px; 23 background:pink; 24 } 25 .right{ 26 width:calc(100% - 100px); 27 height:300px; 28 background:blue; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="cont"> 34 <div class="left"></div> 35 <div class="right"></div> 36 </div> 37 </body> 38 </html>
以上是关于左侧固定,右侧自适应的布局的主要内容，如果未能解决你的问题，请参考以下文章