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

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

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

    • 与 “浮动法”相比,这种方法可以随意放置三个元素的位置
    <div>
    	<div class="left"></div>
    	<div class="middle"></div>
    	<div class="right"></div>
    </div>
    
  • flex 布局:给父元素 设置 display: flex; 中间元素 设置 flex: 1;

    • 缺点:middle 元素必须放置在中间位置,否则需要使用css的order属性改变元素位置
    <div class="test-2">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
    
     .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;
      }
    
扩展之圣杯布局、双飞翼布局(利用浮动、定位、负边距)
  • 圣杯布局:

    <div class="test-2">
          <div class="middle">main</div>
          <div class="left">left</div>
          <div class="right">right</div>
    </div>
    
    
     /* 圣杯 布局 */
      .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;
      }
    
  • 双飞翼布局:

    <div class="test-2">
          <div class="middle">
            <div class="middle-wrap">main</div>
          </div>
          <div class="left">left</div>
          <div class="right">right</div>
    </div>
    
       /* 双飞翼 布局 */
      .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 :<div class="middle"> <div class="middle-wrap">main</div> </div>,设置中间元素 内层div 的margin-left和margin-right分别为左、右元素的宽度
知识点扩展:
  • margin-left为 -100% 时,表示 该元素 相对于上一个浮动元素 向左移动整个窗口宽度的50%
上一篇:# 程序综合设计实践 :用QT实现计算器


下一篇:二分搜索技术--给定排好顺序的数组,找到具体的数在数组中的位置