---
order: 5
category:
  zh-CN: 设计指引
  en-US: Guide
title: 
  zh-CN: 组合示例
  en-US: Examples
---

## 示例

我们将以上模板整合出三个模板，以供参考：

<div class="examples-wrapper">
  <div class="examples-img">
    <img width="100%" src="https://gw.alipayobjects.com/zos/rmsportal/aniQEcLzAFArUbkPYkyQ.png">
    <p>示例1</p>
  </div>
  <div class="examples-img">
    <img width="100%" src="https://gw.alipayobjects.com/zos/rmsportal/HCsgacmIIXZqvicZJDDZ.png">
    <p>示例2</p>
  </div>
  <div class="examples-img">
    <img width="100%" src="https://gw.alipayobjects.com/zos/rmsportal/ZrFKiApOqmIjSuYsHrpr.png">
    <p>示例3</p>
  </div>
</div>

<style>
  .examples-wrapper{
    width: calc(100% + 48px);
    margin-left: -24px;
  }
  .examples-img {
    width: 33%;
    display: inline-block;
    padding: 0 24px;
    vertical-align: top;
  }
  .examples-img p {
    text-align: center;
    margin: auto;
  }
  @media only screen and (max-width: 767.99px) {
    .examples-wrapper{
      width: 100%;
      margin: auto;
    }
    .examples-img { 
      width: 100%;
      padding: 0;
      margin-bottom: 16px;
    }
  }
</style>