二列布局

• 法一
  • 父元素display：flex;（自动水平分布，含有自适应效果）一个子元素固定宽高，另一个占用剩余部分flex：1
• 法二
  • 定位：

    

• 法三
  • 浮动

    

三列布局（左右固定宽度，中间自适应）

• 法一
  • 父元素display：flex;（自动水平分布，含有自适应效果）一共有三个孩子选一边的一个孩子固定宽高，剩下两个孩子自由分配剩余部分，使用flex 例如下图，意思就是将剩余部分分成了三份。第二个孩子占用1份 第三个孩子占用2份

    

• 法二
  • 定位：

    

• 法三
  • 浮动

由于第一个元素左浮动之后第二个元素自动上去，但因为div是块级元素所以依然占一行（剩余部分为元素的外边距）所以第三个元素无法浮动到二元素右边，我们的目的是要让左右固定宽度，中间自适应，因此有下面的讲究

巧妙之处：1.浮动的顺序是按照html的顺序依次排列 2.浮动之后空出来的部分为该元素的外边距，下一个元素只能挨着他的外边距之外排布 3.使第一个元素向左，第二个向右浮动 第三个自动上去居中，不设置宽度，加左右外边距＝左右元素宽度即可自适应