css实现三列布局,左右固定宽度,中间自适应

2021-05-27 23:59

阅读:596

标签:pad   str   利用   适应   浮动   使用   设置   改变   add   

  • float 浮动法:中间的元素需放在最后,左右元素使用左浮动和右浮动,中间的元素使用 margin-left 和 margin-right 与两边留出间隔(就是两个浮动元素的宽度)

    • 缺点:三个元素的顺序受限,middle 必须放在最后,而且浏览器窗口宽度不够时,right 元素会被挤到下一行
  • 绝对定位法:左右两个元素使用 position: absolute 绝对定位,middle 使用 margin-left 和 margin-right 与两边留出间隔(就是两个浮动元素的宽度)

    • 与 “浮动法”相比,这种方法可以随意放置三个元素的位置
  • flex 布局:给父元素 设置 display: flex; 中间元素 设置 flex: 1;

    • 缺点:middle 元素必须放置在中间位置,否则需要使用css的order属性改变元素位置
    .test-2 { display: flex; height: 100px; background: #000; } .test-2 .left { width: 100px; background: #fff; } .test-2 .right { width: 200px; background: #f00; } .test-2 .middle { flex: 1; }
扩展之圣杯布局、双飞翼布局(利用浮动、定位、负边距)
  • 圣杯布局:

    main
    left
    right
     /* 圣杯 布局 */
      .test-2 {
        padding: 0 200px 0 100px;
      }
      .test-2 .left,.right,.middle {
        position: relative;
        float: left;
        height: 100px;
      }
      .test-2 .left {
        width: 100px;
        margin-left: -100%;
        left: -100px;
        background: #00f;
      }
      .test-2 .right {
        width: 200px;
        margin-left: -200px;
        right: -200px;
        background: #f00;
      }
      .test-2 .middle {
        width: 100%;
        background: #0f0;
      }
    
  • 双飞翼布局:

    main
    left
    right
       /* 双飞翼 布局 */
      .test-2 .left,.right,.middle {
        float: left;
        height: 100px;
      }
      .test-2 .left {
        width: 100px;
        margin-left: -100%;
        background: #00f;
      }
      .test-2 .right {
        width: 200px;
        margin-left: -200px;
        background: #f00;
      }
      .test-2 .middle {
        width: 100%;
        background: #0f0;
      }
      .test-2 .middle .middle-wrap {
        margin: 0 200px 0 100px;
      }
    
  • 圣杯布局和双飞翼布局的区别

    • 首先两者的html布局,都是中间元素 放在最前面
    • 圣杯布局:首先设置父元素的padding-left和padding-right分别为左右元素的宽度,然后设置三个元素为左浮动,设置中间元素的宽度为100%,设置左边元素的margin-left为-100%,右边元素的margin-left为负的 自身宽度,此时中间元素的左右都会被挡住一部分,解决方法为:设置三个元素的position:relative,然后设置左元素的left:负的自身宽度,右元素的right:负的自身宽度
    • 双飞翼布局:不设置父元素的padding值,与圣杯布局相同,也设置三个元素为左浮动,设置中间元素的宽度为100%,设置左边元素的margin-left为-100%,右边元素的margin-left为负的 自身宽度,其解决中间元素被挡住一部分的解决方法为:为中间元素多包裹一层 div :
      main
      ,设置中间元素 内层div 的margin-left和margin-right分别为左、右元素的宽度
知识点扩展:
  • margin-left为 -100% 时,表示 该元素 相对于上一个浮动元素 向左移动整个窗口宽度的50%

css实现三列布局,左右固定宽度,中间自适应

标签:pad   str   利用   适应   浮动   使用   设置   改变   add   

原文地址:https://www.cnblogs.com/upward-lalala/p/14787998.html


评论


亲,登录后才可以留言!