经典的流式布局实现方法总结(三)(圣杯布局&双飞翼布局)

两侧固定中间自适应的三种实现方法

1.利用bfc块级格式化上下文, 实现两侧固定中间自适应
（1）左右固定宽高，进行浮动
（2）中间 overflow: hidden;

<style>
    .father {
      height: 500px;
      background-color: pink;
    }
    .left {
      float: left;
      width: 200px;
      height: 400px;
      background-color: blue;
    }
    .right {
      float: right;
      width: 200px;
      height: 400px;
      background-color: blue;
    }
    .center {
      height: 450px;
      background-color: green;
      overflow: hidden;
    }
  </style>

html结构

 <!-- 注意:left和right必须放在center前面 -->
 <div class="father">
   <div class="left"></div>
   <div class="right"></div>
   <div class="center"></div>
 </div>

2.利用定位实现两侧固定中间自适应
(1)父盒子设置左右padding值
(2)给左右盒子的width设置父盒子的padding值,然后分别定位到padding处.
(3)中间盒子自适应

具体css代码

<style>
    .father {
        height: 400px;
        background-color: pink;
        position: relative;
        padding: 0 200px;
    }
    .left,.right {
        width: 200px;
        height: 300px;
        background-color: yellow;
        position: absolute;
        top: 0;
    }
    .left {
        left: 0;
    }
    .right {
        right: 0;
    }
    .center {
        background-color: blue;
        height: 350px;
    }

</style>

html结构

<div class="father">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
</div>

3.利用flex布局实现两侧固定中间自适应
(1) 父盒子设置display:flex;
(2) 左右盒子设置固定宽高
(3) 中间盒子设置flex:1 ;

<style>
    .father {
        height: 400px;
        background-color: pink;
        display: flex;
    }
    .left {
        width: 200px;
        height: 300px;
        background-color: yellow;
    }
    .right {
        width: 200px;
        height: 300px;
        background-color: yellow;
    }
    .center {
        flex: 1;
        background-color: blue;
    }

</style>

html结构

<div class="father">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
</div>

等分布局

具体css代码

<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    ul {
      list-style: none;
      width: 100%;
      height: 100px;
    }
    li {
      float: left;
      width: 20%;
      height: 100px;
      border: 1px solid red;
    }
  </style>

html结构

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>