zoukankan html css js c++ java

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. 运行效果图：

查看全文

相关阅读:
BZOJ4923 K小值查询（splay）
BZOJ4919 大根堆（动态规划+treap+启发式合并）
BZOJ4922 Karp-de-Chant Number（贪心+动态规划）
BZOJ4915 简单的数字题
 BZOJ4921 互质序列
 BZOJ4898/5367 Apio2017商旅（分数规划+floyd）
BZOJ4899 记忆的轮廓（概率期望+动态规划+决策单调性）
Educational Codeforces Round 55 Div. 2 翻车记
 166. Fraction to Recurring Decimal
390. Elimination Game

原文地址：https://www.cnblogs.com/dhqy/p/14174380.html