# 如何利用容器实现图文混合显示

来源快照：`result_data_new_260518.json`

- 来源 ID：`1969528526886243939`
- 模块：低代码平台e-builder
- 目录：专题学习 - 场景专题 - 页面（仪表盘）专题
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

**1.  ****场景说明  **

        


在页面搭建过程中，我们通常会遇到图片、文字、按钮等组件混合显示的情况，想要使我们的页面更加美观，往往需要用到容器的布局、间距、边框等更加细致化的设置。展示效果如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705784883642372&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


**2\. 功能简介  **

上述场景页面设计器中添加容器嵌套容器，设计容器高度，背景图片，同时搭配文本、多列容器、按钮等组件实现混合展示效果

  


**3\. 操作说明**

**  
**

1）拖拽一个容器到页面设计器中，通过外观自定义样式将背景颜色从默认白色改为无色、将默认边框线改为none

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705784738209815&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


2）拖拽一个容器到现有的容器中，通过外观自定义样式中大小设置容器高度、通过背景设置添加背景图片，并通过边框设置容器圆角

  


  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705789135781898&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

  


3）拖拽一个文本组件到第二个容器中，属性维护文本内容、设置文本大小，同时通过外观自定义样式中间距设置文本距离左边间距、以及文本内容内间距

  


**![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705788998885405&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)**  


**![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705793269424141&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)**

**  
**

****

4）拖拽多列容器到第二个容器中，通过外观样式中间距设置多列容器上间距、左间距

  


![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705793269424158&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

5）拖拽按钮组件到多列容器中，属性设置维护按钮名称、类型以及设置按钮默认、悬浮样式

  


**![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705797751767055&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)**  


**  
**

****

6）添加单击事件进行事件配置，设置动作为打开页面，配置链接地址和打开方式

**  
**![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705797751767086&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
