zoukankan      html  css  js  c++  java

  • [CSS]三栏自适应布局

    方法一：绝对定位法
    1. <!doctype html>
    2. <html>
    3.  <head>
    4.   <meta charset="UTF-8">
    5.   <title>Document</title>
    6.   <style>
    7. 	#left,#right {
    8. 		position:absolute;
    9. 		width:200px;
    10. 		top:0;
    11. 		height:100%;
    12. 	}
    13. 	#left {
    14. 		border:1px solid red;
    15. 		left:0;
    16. 		background:red;
    17. 	}
    18. 	#right {
    19. 		border:1px solid green;
    20. 		right:0;
    21. 		background:green;
    22. 	}
    23. 	#main {
    24. 		border:1px solid orange;
    25. 		margin:0 210px;
    26. 		height:100%;
    27. 		background:orange;
    28. 	}
    29.   </style>
    30.  </head>
    31.  <body>
    32. 	<div id="left">
    33.         <h1>Left Sidebar</h1>
    34.         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    35.     </div>
    36.     <div id="main">
    37.             <h1>Main content</h1>
    38.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    39.     </div>
    40. 	<div id="right">
    41.             <h1>Right sidebar</h1>
    42.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do llum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    43.     </div>
    44.  </body>
    45. </html>

    方法二：margin负值法
    1. <!doctype html>
    2. <html>
    3.  <head>
    4.   <meta charset="UTF-8">
    5.   <title>Document</title>
    6.   <style>
    7. 	html,body {
    8. 		margin:0;
    9. 		height:100%;
    10. 	}
    11. 	h1 {
    12. 		margin:0;
    13. 	}
    14. 	#main {
    15. 		width:100%;
    16. 		height:100%;
    17. 		float:left;
    18. 	}
    19. 	#main #content {
    20. 		height:100%;
    21. 		background:orange;
    22. 		margin:0 210px;
    23. 	}
    24. 	#left,#right {
    25. 		width:200px;
    26. 		height:100%;
    27. 		float:left;
    28. 		background:green;
    29. 	}
    30. 	#left{
    31. 		margin-left:-100%;
    32. 	}
    33. 	#right{
    34. 		margin-left:-200px;
    35. 	}
    36.   </style>
    37.  </head>
    38.  <body>
    39.  <div id="main">
    40. 	<div id="content">
    41.         <h1>Main content</h1>
    42.         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    43.     </div>
    44. </div>
    45.     <div id="left">
    46.             <h1>Left sidebar</h1>
    47.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    48.     </div>
    49. 	<div id="right">
    50.             <h1>Right sidebar</h1>
    51.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do llum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    52.     </div>
    53.  </body>
    54. </html>

    方法三：自身浮动法
    1. <!doctype html>
    2. <html>
    3.  <head>
    4.   <meta charset="UTF-8">
    5.   <title>Document</title>
    6.   <style>
    7. 	html,body {
    8. 		margin:0;
    9. 		height:100%;
    10. 	}
    11. 	h1 {
    12. 		margin:0;
    13. 	}
    14. 	#main {
    15. 		height:100%;
    16. 		background:orange;
    17. 		margin:0 210px;
    18. 	}
    19. 	#left,#right {
    20. 		width:200px;
    21. 		height:100%;
    22. 		background:green;
    23. 	}
    24. 	#left{
    25. 		float:left;
    26. 	}
    27. 	#right{
    28. 		float:right;
    29. 	}
    30.   </style>
    31.  </head>
    32.  <body>
    33.  
    34. 	<div id="left">
    35.         <h1>Left sidebar</h1>
    36.         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    37.     </div>
    39.     <div id="right">
    40.             <h1>Right sidebar</h1>
    41.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    42.     </div>
    43. 	<div id="main">
    44.             <h1>Main content</h1>
    45.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do llum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    46.     </div>
    47.  </body>
    48. </html>

    方法四：flex布局
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <style>
    5. 	.container {
    6.             display: flex;
    7. 	}
    8. 	.main {
    9.             flex-grow: 1;
    10. 	    height: 300px;
    11. 	    background-color: red;
    12. 	}
    13. 	.left {
    14. 	    order: -1;
    15. 	    flex: 0 1 200px;
    16. 	    margin-right: 20px;
    17. 	    height: 300px;
    18. 	    background-color: blue;
    19. 	}
    20. 	.right {
    21. 	    flex: 0 1 100px;
    22.             margin-left: 20px;
    23. 	    height: 300px;
    24. 	    background-color: green;
    25. 	}
    26.     </style>
    27. </head>
    28. <body>
    29.     <div class="container">
    30. 	<div class="main"></div>
    31. 	<div class="left"></div>
    32. 	<div class="right"></div>
    33.     </div>
    34. </body>
    35. </html>

    方法五：table布局
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <style>
    5.         .container {
    6. 	    display: table;
    7. 	    width: 100%;
    8.         }
    9.         .left, .main, .right {
    10. 	    display: table-cell;
    11.         }
    12.         .left {
    13. 	    width: 200px;
    14. 	    height: 300px;
    15. 	    background-color: red;
    16.         }
    17.         .main {
    18. 	    background-color: blue;
    19.         }
    20.         .right {
    21. 	    width: 100px;
    22. 	    height: 300px;
    23. 	    background-color: green;
    24.         }
    25.     </style>
    26. </head>
    27. <body>
    28.     <div class="container">
    29. 	<div class="left"></div>
    30. 	<div class="main"></div>
    31. 	<div class="right"></div>
    32.     </div>
    33. </body>
    34. </html>
  • 相关阅读:
    pdf.js使用
    当前时间距离下一个分钟值以0或者5结尾的时间点（单位：毫秒）小于1分钟时，返回下下个以0或5结尾的时间点
    1
    Could not get JDBC Connection; nested exception is java.sql.SQLException: Cannot get a connection, pool error Pool exhausted 异常原因排查
    gcp导出mysql慢日志写入数据库分析
    redis慢日志结构化
    谷歌云监控告警
    google-cloud的sql-rds导出my.cnf
    慢sql 实时钉钉告警
    docker跨网段搭建gp测试环境
  • 原文地址：https://www.cnblogs.com/enginex/p/6831052.html
Copyright © 2011-2022 走看看