经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
详解CSS多种三列自适应布局实现_CSS教程_CSS
来源:jb51  时间:2021/3/1 8:40:13  对本文有异议

前言

为了按照常规WEB布局,这里全部采用拥有header和footer模式进行左中右布局编写。

第一种:基于float实现

实现思路

常规思路,使左右两个Aside分别浮动至左右两侧即可

代码实现

  1. <!-- HTML部分 -->
  2. <div class="container">
  3. <!-- 顶部Header -->
  4. <header>这里是头部</header>
  5. <!-- 中间aside及content -->
  6. <div class="middle clearfix">
  7. <aside class="left"></aside>
  8. <aside class="right"></aside>
  9. <!-- 中间content显示内容 为了防止将右侧挤下去故放置在右侧栏下方 -->
  10. <div class="content">这里是内容</div>
  11. </div>
  12. <!-- 底部Footer -->
  13. <footer></footer>
  14. </div>
  15. <!-- CSS部分 -->
  16. <style lang="scss">
  17. * {
  18. margin: 0;
  19. padding: 0;
  20. }
  21. .clearfix {
  22. zoom: 1;
  23. &::after {
  24. display: block;
  25. content: ' ';
  26. clear:both
  27. }
  28. }
  29. html, body {
  30. width: 100%;
  31. height: 100%
  32. }
  33. .container {
  34. width: 100%
  35. height: 100%
  36. header {
  37. height: 80px;
  38. background: rgba(0, 0, 0, 0.5)
  39. }
  40. footer {
  41. height: 80px;
  42. background: rgba(0, 0, 0, 0.5)
  43. }
  44. .middle {
  45. height: calc(100% - 80px - 80px)
  46. aside {
  47. height: 100%;
  48. width: 300px;
  49. background: rgba(156, 154, 249, 1)
  50. }
  51. .left {
  52. float: left
  53. }
  54. .right: {
  55. float: right
  56. }
  57. }
  58. }
  59. }
  60. </style>

实现效果

第二种:基于position:absolute实现

实现思路

为中间三栏父级赋予position: relative,赋予左右Aside position: absolute,并且分别赋予left: 0 right: 0 width:自定义值,赋予中间content left,right 分别等于左右width即可

代码实现

  1. <!-- HTML相关代码 -->
  2. <div class="container">
  3. <!-- 顶部Header -->
  4.   <header></header>
  5.   <div class="middle">
  6. <!-- 左侧Aside -->
  7.     <aside class="left"></aside>
  8. <!-- 中间content内容 -->
  9.     <div class="content">这里是内容</div>
  10. <!-- 右侧Aside -->
  11.     <aside class="right"></aside>
  12.   </div>
  13. <!-- 底部Footer -->
  14.   <footer></footer>
  15. </div>
  16. <!-- CSS相关代码 -->
  17. <style lang="scss">
  18. * {
  19. margin: 0;
  20. padding: 0
  21. }
  22. html, body {
  23. width: 100%;
  24. height: 100%
  25. }
  26. .container {
  27. width: 100%;
  28. height: 100%;
  29. header {
  30. height: 80px;
  31. background: rgba(0, 0, 0, 0.5);
  32. }
  33. footer {
  34. height: 80px;
  35. background: rgba(0, 0, 0, 0.5);
  36. }
  37. .middle {
  38. height: calc(100% - 80px - 80px);
  39. position: relative;
  40. aside,
  41. .content {
  42. position: absolute;
  43. }
  44. .left {
  45. width: 300px;
  46. background: rgba(156, 154, 249, 1);
  47. left: 0;
  48. height: 100%;
  49. }
  50. .right {
  51. width: 300px;
  52. background: rgba(156, 154, 249, 1);
  53. right: 0;
  54. height: 100%;
  55. }
  56. .content {
  57. left: 300px;
  58. right: 300px;
  59. }
  60. }
  61. }
  62. </style>

实现效果

第三种:基于display:flex实现

实现思路

赋予左中右三列父级display: flex,赋予左右Aside width自定义,赋予中间content flex:1即可

代码实现

  1. <!-- HTML相关代码 -->
  2. <div class="container">
  3. <!-- 顶部Header -->
  4. <header></header>
  5. <div class="middle">
  6. <!-- 左侧Aside -->
  7. <aside class="left"></aside>
  8. <!-- 中间content内容 -->
  9. <div class="content">这里是内容</div>
  10. <!-- 右侧Aside -->
  11. <aside class="right"></aside>
  12. </div>
  13. <!-- 底部Footer -->
  14. <footer></footer>
  15. </div>
  16. <!-- CSS部分 -->
  17. <style lang="scss">
  18. * {
  19. margin: 0;
  20. padding: 0;
  21. }
  22. html, body {
  23. width: 100%;
  24. height: 100%;
  25. }
  26. .container {
  27. header {
  28. height: 80px;
  29. background: rgba(0, 0, 0, 0.5);
  30. }
  31. footer {
  32. height: 80px;
  33. background: rgba(0, 0, 0, 0.5);
  34. }
  35. .middle {
  36. display: flex;
  37. height: calc(100% - 80px - 80px);
  38. aside {
  39. width: 300px;
  40. background: rgba(156, 154, 249, 1);
  41. }
  42. .content: {
  43. flex: 1;
  44. }
  45. }
  46. }
  47. </style>

实现效果

第四种:基于display: table实现

实现思路

赋予左中右三列父级display: table, width: 100%,分别赋予左中右三列display: table-cell,分别赋予左右Aside width即可。

代码实现

  1. <!-- HTML相关代码 -->
  2. <div class="container">
  3. <!-- 顶部Header -->
  4. <header></header>
  5. <div class="middle">
  6. <!-- 左侧Aside -->
  7. <aside class="left"></aside>
  8. <!-- 中间content内容 -->
  9. <div class="content">这里是内容</div>
  10. <!-- 右侧Aside -->
  11. <aside class="right"></aside>
  12. </div>
  13. <!-- 底部Footer -->
  14. <footer></footer>
  15. </div>
  16. <!-- CSS部分 -->
  17. <style lang="scss">
  18. * {
  19. margin: 0;
  20. padding: 0;
  21. }
  22. html, body {
  23. width: 100%;
  24. height: 100%;
  25. }
  26. .container {
  27. header {
  28. height: 80px;
  29. background: rgba(0, 0, 0, 0.5);
  30. }
  31. footer {
  32. height: 80px;
  33. background: rgba(0, 0, 0, 0.5);
  34. }
  35. .middle {
  36. display: table;
  37. width: 100%
  38. height: calc(100% - 80px - 80px);
  39. aside {
  40. width: 300px;
  41. display: table-cell;
  42. background: rgba(156, 154, 249, 1);
  43. }
  44. .content: {
  45. display: table-cell;
  46. }
  47. }
  48. }
  49. </style>

实现效果

第五种:基于display: grid实现

实现思路

赋予左中右三列父级display: grid,并且使用grid-template-columns: 300px auto 300px,将其分为宽为300px、auto、300px三列布局即可。

代码实现

  1. <!-- HTML相关代码 -->
  2. <div class="container">
  3. <!-- 顶部Header -->
  4. <header></header>
  5. <div class="middle">
  6. <!-- 左侧Aside -->
  7. <aside class="left"></aside>
  8. <!-- 中间content内容 -->
  9. <div class="content">这里是内容</div>
  10. <!-- 右侧Aside -->
  11. <aside class="right"></aside>
  12. </div>
  13. <!-- 底部Footer -->
  14. <footer></footer>
  15. </div>
  16. <!-- CSS部分 -->
  17. <style lang="scss">
  18. * {
  19. margin: 0;
  20. padding: 0;
  21. }
  22. html, body {
  23. width: 100%;
  24. height: 100%;
  25. }
  26. .container {
  27. header {
  28. height: 80px;
  29. background: rgba(0, 0, 0, 0.5);
  30. }
  31. footer {
  32. height: 80px;
  33. background: rgba(0, 0, 0, 0.5);
  34. }
  35. .middle {
  36. display: grid;
  37. grid-template-columns: 300px auto 300px;
  38. height: calc(100% - 80px - 80px);
  39. aside {
  40. background: rgba(156, 154, 249, 1);
  41. }
  42. }
  43. }
  44. </style>

实现效果

到此这篇关于详解CSS多种三列自适应布局实现的文章就介绍到这了,更多相关CSS 三列自适应布局内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持w3xue! 

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号