双飞燕布局实现的三种方式

作者: spencer_sun | 来源:发表于2020-06-16 17:07 被阅读0次

双飞燕布局实现的三种方式
圣杯模式
Android绘制颜色渐变图形
Flex、Grid、媒体查询实现响应式布局
圣杯布局和双飞燕布局实现左右两列固定中间自适应
三种方式实现圣杯布局
实现粘连布局的三种方式
css 样式小技巧
css Grid布局
Flutter学习二-布局Row、Column、Stack

双飞燕布局：两边的div宽度固定，中间的div自适应

1 实现方式一： position:absolute;

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style type="text/css">
    .box {
      width: 100%;
      height: 60px;
      border: 1px solid #000;
    }
    .left {
      position: absolute;
      height: 60px;
      width: 100px;
      background-color: yellow;
      left: 0;
    }
    .middle {
      position: absolute;
      left: 100px;
      right: 100px;
      height: 60px;
      background-color: #ccc;
    }
    .right {
      position: absolute;
      height: 60px;
      width: 100px;
      background-color: blue;
      right: 0;
    }
  </style>
  <body>
    <div class="box">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

效果

Screen Shot 2020-06-16 at 16.54.35.png

2 flex 布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style type="text/css">
    .box {
      width: 100%;
      height: 60px;
      border: 1px solid #000;
      display: flex;
    }
    .left {
      height: 60px;
      width: 100px;
      background-color: yellow;
      flex: auto 0 0;
    }
    .middle {
      height: 60px;
      background-color: #ccc;
      flex: auto 1 0;
    }
    .right {
      height: 60px;
      width: 100px;
      background-color: blue;
      flex: auto 0 0;
    }
  </style>
  <body>
    <div class="box">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

效果图片

Screen Shot 2020-06-16 at 16.54.35.png

3 浮动法
浮动的时候要注意盒子的顺序

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style type="text/css">
    .box {
      width: 100%;
      height: 60px;
      border: 1px solid #000;
      position: relative;
    }
    .left {
      height: 60px;
      width: 100px;
      background-color: yellow;
      float: left;
    }
    .middle {
      height: 60px;
      background-color: #ccc;
      padding-left: 100px;
      padding-right: 100px;
    }
    .right {
      height: 60px;
      width: 100px;
      background-color: blue;
      float: right;
    }
  </style>
  <body>
    <div class="box">
      <div class="left"></div>
      <div class="right"></div>
      <div class="middle"></div>
    </div>
  </body>
</html>

图片效果

Screen Shot 2020-06-16 at 16.54.35.png