zoukankan html css js c++ java

527 三列布局：float + margin，float + overflow，table + table-cell，flex，grid，postion，中间自适应-四种方法

三列布局一般情况下是指三列中左边两列是确定的宽度，右边一列是自动填满剩余所有空间的一种布局效果;

两列定宽,一列自适应(右边)

float + margin属性实现；

float + overflow属性实现；

display属性的table相关值实现；

使用flex实现；

使用Grid实现；

两侧定宽,中间自适应

圣杯布局方法

双飞翼布局方法

使用Gird实现

使用table实现

使用flex实现

使用position实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三列布局解决方案1- float + margin</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #left {
       200px;
      /* 定宽 */
      height: 300px;
      background-color: #c9394a;

      /* 浮动 */
      float: left;
    }

    #center {
       200px;
      /* 定宽 */
      height: 300px;
      background-color: green;

      /* 浮动 */
      float: left;
    }

    #right {
      /* 宽度自适应 */
      height: 400px;
      background-color: #cccccc;

      /* 整体移动往右移动 */
      margin-left: 410px;
    }
  </style>
</head>

<body>
  <div id="parent">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
  </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三列布局解决方案2- float + overflow</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #left {
       200px;
      /* 定宽 */
      height: 300px;
      background-color: #c9394a;
      float: left;
    }

    #center {
       200px;
      /* 定宽 */
      height: 300px;
      background-color: green;
      float: left;
    }

    #right {
      height: 400px;
      background-color: #cccccc;

      /* 利用BFC的特点  - 隔离的容器  不会与其他容器出现重叠的情况 */
      overflow: hidden;
      margin-left: 410px;
    }
  </style>
</head>

<body>
  <div id="parent">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
  </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三列布局解决方案3- table + table-cell</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #parent {
       100%;
      /* table */
      display: table;
    }

    #left {
       200px;
      /* 定宽 */
      height: 300px;
      background-color: #c9394a;

      /*  td */
      display: table-cell;
    }

    #center {
       200px;
      /* 定宽 */
      height: 300px;
      background-color: green;

      /*  td */
      display: table-cell;
    }

    #right {
      height: 400px;
      background-color: #cccccc;

      /*  td */
      display: table-cell;
    }
  </style>
</head>

<body>
  <div id="parent">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
  </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三列布局解决方案4-flex</title>
    <style>
    *{margin: 0;padding: 0;}
    
    #parent{
      height: 300px;

      /* flex 子元素 - 水平排列 */
      display:flex;
    }

    #left {
       200px; /* 定宽 */
      height: 300px;
      background-color: #c9394a;
    }

    #center {
       200px; /* 定宽 */
      height: 300px;
      background-color: green;
    }

    #right {
      /* flex:1  = 100% - 200 - 200 */

      flex:1;
      height: 400px;
      background-color: #cccccc;
    }
  </style>
  </head>

  <body>
    <div id="parent">
      <div id="left"></div>
      <div id="center"></div>
      <div id="right"></div>
    </div>
  </body>

</html>

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三列布局解决方案5-grid网格布局</title>
    <style>
    *{margin: 0;padding: 0;}
    
    #parent{
       height: 400px;
       /* grid */
       display: grid;
       /* 左 = 400px  中间 =  400px  右 = auto 自适应 */
       grid-template-columns:400px 400px auto;
    }
    #left {
      height: 300px;
      background-color: #c9394a;
    }

    #center {
      height: 300px;
      background-color: green;
    }

    #right {
      height: 400px;
      background-color: #cccccc;
    }
  </style>
  </head>

  <body>
    <div id="parent">
      <div id="left"></div>
      <div id="center"></div>
      <div id="right"></div>
    </div>
  </body>

</html>

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三列布局解决方案6-postion定位</title>
    <style>
    *{margin: 0;padding: 0;}
    
    #parent{
       height: 400px;
       position: relative;
    }
    #left {
     /* 定宽 */
      200px; 
      height: 300px;
      background-color: #c9394a;

      /* 左容器靠左 */
      position: absolute;
      top:0;
      left:0;
    }

    #center {
     /* 定宽 */
      200px; 
      height: 300px;
      background-color: green;
       /* 中间容器 - 在left的右边 */
       position: absolute;
       top:0;
       left:200px;
    }

    #right {
      height: 400px;
      background-color: #cccccc;

      /* 自适应 100% - 200 - 200 = */
      position: absolute;
      top:0;
      left:400px;
      right:0;
    }
  </style>
  </head>

  <body>
    <div id="parent">
      <div id="left"></div>
      <div id="center"></div>
      <div id="right"></div>
    </div>
  </body>

</html>

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>左右定宽 中间自适应-四种方法(左中右结构)</title>
    <style>

        /* 
        方法一: 
       display: grid;
       grid-template-columns: 200px auto 200px;
        
        方法二:  
        父容器  100%; display:table  （table）
        子容器  display: table-cell;  （td）
        
        方法三
        父容器: display:flex;
        子容器  中 = 自适应   flex:1   左= 右 = 200px

        方法四:


         */
    *{margin: 0;padding: 0;}
    
    #parent{
        /* 定位开启 */
       position: relative;
       height: 400px;
      
    }
    #left {
     /* 定宽 */
      200px;
      height: 300px;
      background-color: #c9394a;

      position: absolute;
      top:0;
      left:0;

    }

    #center {
      /* 自适应 */
      height: 300px;
      background-color: green;

      /* 宽度自适应 100%  - 200 - 200 */
      position: absolute;
      top:0;
      left:210px;
      right:210px;

    }

    #right {
      /* 定宽 */
       200px;
      height: 400px;
      background-color: #cccccc;

      position: absolute;
      top:0;
      right:0;


    }
  </style>
  </head>

  <body>
      <!-- 主体容器center  优先加载 
      三列布局  center放在其他容器结构的最上面

      center
      left
      right
    
      -->
    <div id="parent">
      <div id="left"></div>
      <div id="center"></div>
      <div id="right"></div>
    </div>
  </body>

</html>

查看全文

相关阅读:
Java中一对多映射关系
 Java中多对多映射关系
 java中的匿名内部类总结
 (自己转)比较ArrayList、LinkedList、Vector
Statement 接口的应用（存在sql语句的注入风险）
创建Jutil (单元测试)
自己（转）抽象类和接口联系与区别
 SQL查询语句
 数据库基础查询语句中的几个细节
 数据库查询语句

原文地址：https://www.cnblogs.com/jianjie/p/13771485.html