CSS 布局之—— 用 Grid 布局模拟 WPF 风格布局

1. 实现代码：　

<html>
    <div class="grid" style="grid-template-rows: auto auto; grid-template-columns: 150px 150px;">
        <div class="stackPanel" style="grid-row: 1 / span 1; border:1px solid #000;">
            <div class="content Horiz-Align-Left Vertical-Align-Top" style="background-color:red;">1</div>  
            <div class="content Horiz-Align-Center Vertical-Align-Center" style="background-color:orange;">2</div>  
            <div class="content Horiz-Align-Right Vertical-Align-Bottom" style="background-color:yellow;">3</div>  
        </div>
        <div class="wrapPanel" style="grid-row: 2 / span 1;">
            <div class="container Horiz-Content-Align-Left Vertical-Content-Align-Top">
                <div class="content" style="background-color:green;">4</div>
            </div>
            <div class="container wrapPanel Horiz-Content-Align-Center Vertical-Content-Align-Center">
                <div class="content" style="background-color:cyan;">5</div>
            </div>
            <div class="container wrapPanel Horiz-Content-Align-Right Vertical-Content-Align-Bottom">
                <div class="content" style="background-color:blue;">6</div>
            </div>
        </div>
    </div>
</html>

<style type="text/css">    
    .container {
        width: 150px;
        height: 150px;
        border:1px solid purple;
    }
    
    .content {
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    
  .grid {
      display: grid;
  }

  .wrapPanel {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
  }

  .stackPanel {
    display: grid;
    grid-auto-flow: row;
    align-content: start;
  }

  /* 水平对齐 */
  .Horiz-Align-Left {
    justify-self: start;
  }

  .Horiz-Align-Center {
    justify-self: center;
  }

  .Horiz-Align-Right {
    justify-self: end;
  }

  /* 垂直对齐 */
  .Vertical-Align-Top {
    align-self: start;
  }

  .Vertical-Align-Center {
    align-self: center;
  }

  .Vertical-Align-Bottom {
    align-self: end;
  }

  /* 水平内容对齐 */
  .Horiz-Content-Align-Left {
    justify-content: start;
    justify-items: start;
  }

  .Horiz-Content-Align-Center {
    justify-content: center;
    justify-items: center;
  }

  .Horiz-Content-Align-Right {
    justify-content: end;
    justify-items: end;
  }

  /* 垂直内容对齐 */
  .Vertical-Content-Align-Top {
    align-items: start;
  }

  .Vertical-Content-Align-Center {
    align-items: center;
  }

  .Vertical-Content-Align-Bottom {
    align-items: end;
  }
</style>

View Code

2. 运行效果图：

相关阅读:
性能测试三：jmeter进阶之图形插件
 性能测试二：jmeter参数化+聚合报告
 性能测试一：jmeter基础入门
 pytest十六：allure2 生成 html 报告
 pytest十五：pytest-html 生成 html 报告
 Confluence 6 Cron 表达式
 Confluence 6 任务的类型
 Confluence 6 查看一个任务的执行历史
 Confluence 6 禁用或者重新启用一个任务
 Confluence 6 手动运行和修改
原文地址：https://www.cnblogs.com/dhqy/p/14174380.html