• CSS中三栏布局的实现


    三栏布局一般指的是页面中一共有三栏,左右两栏宽度固定,中间自适应的布局,三栏布局的具体实现:

    • 利用绝对定位,左右两栏设置为绝对定位,中间设置对应方向大小的margin的值。
    1. .outer {
    2. position: relative;
    3. height: 100px;
    4. }
    5. .left {
    6. position: absolute;
    7. width: 100px;
    8. height: 100px;
    9. background: tomato;
    10. }
    11. .right {
    12. position: absolute;
    13. top: 0;
    14. right: 0;
    15. width: 200px;
    16. height: 100px;
    17. background: gold;
    18. }
    19. .center {
    20. margin-left: 100px;
    21. margin-right: 200px;
    22. height: 100px;
    23. background: lightgreen;
    24. }
    • 利用flex布局,左右两栏设置固定大小,中间一栏设置为flex:1。
    1. .outer {
    2. display: flex;
    3. height: 100px;
    4. }
    5. .left {
    6. width: 100px;
    7. background: tomato;
    8. }
    9. .right {
    10. width: 100px;
    11. background: gold;
    12. }
    13. .center {
    14. flex: 1;
    15. background: lightgreen;
    16. }
    • 利用浮动,左右两栏设置固定大小,并设置对应方向的浮动。中间一栏设置左右两个方向的margin值,注意这种方式**,中间一栏必须放到最后:**
    1. .outer {
    2. height: 100px;
    3. }
    4. .left {
    5. float: left;
    6. width: 100px;
    7. height: 100px;
    8. background: tomato;
    9. }
    10. .right {
    11. float: right;
    12. width: 200px;
    13. height: 100px;
    14. background: gold;
    15. }
    16. .center {
    17. height: 100px;
    18. margin-left: 100px;
    19. margin-right: 200px;
    20. background: lightgreen;
    21. }
    • 圣杯布局,利用浮动和负边距来实现。父级元素设置左右的 padding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置 margin 负值将其移动到上一行,再利用相对定位,定位到两边。
    1. .outer {
    2. height: 100px;
    3. padding-left: 100px;
    4. padding-right: 200px;
    5. }
    6. .left {
    7. position: relative;
    8. left: -100px;
    9. float: left;
    10. margin-left: -100%;
    11. width: 100px;
    12. height: 100px;
    13. background: tomato;
    14. }
    15. .right {
    16. position: relative;
    17. left: 200px;
    18. float: right;
    19. margin-left: -200px;
    20. width: 200px;
    21. height: 100px;
    22. background: gold;
    23. }
    24. .center {
    25. float: left;
    26. width: 100%;
    27. height: 100px;
    28. background: lightgreen;
    29. }
    • 双飞翼布局,双飞翼布局相对于圣杯布局来说,左右位置的保留是通过中间列的 margin 值来实现的,而不是通过父元素的 padding 来实现的。本质上来说,也是通过浮动和外边距负值来实现的。
    1. .outer {
    2. height: 100px;
    3. }
    4. .left {
    5. float: left;
    6. margin-left: -100%;
    7. width: 100px;
    8. height: 100px;
    9. background: tomato;
    10. }
    11. .right {
    12. float: left;
    13. margin-left: -200px;
    14. width: 200px;
    15. height: 100px;
    16. background: gold;
    17. }
    18. .wrapper {
    19. float: left;
    20. width: 100%;
    21. height: 100px;
    22. background: lightgreen;
    23. }
    24. .center {
    25. margin-left: 100px;
    26. margin-right: 200px;
    27. height: 100px;
    28. }

  • 相关阅读:
    DINO目标检测实验结果可视化(1)——loss和mAP
    用动图详细讲解——栈
    面试时,公司的什么表现让你一看就知道不靠谱?
    带你一起来理解布隆过滤器,带图分析~
    U-boot(二):主Makefile
    PADS生成位号图
    操作系统:进程与线程(二)同步与互斥A
    2022年起重信号司索工(建筑特殊工种)上岗证题目及在线模拟考试
    uniapp-vue3-微信小程序-标签选择器wo-tag
    应用开发类API推荐
  • 原文地址:https://blog.csdn.net/Miller777_/article/details/136727560