找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › 活字格专区 › 求助中心 › 查看内容
发新帖

范方舟

金牌服务用户

18

主题

28

帖子

304

积分

金牌服务用户

积分
304
最新发帖

[已处理] 【9.0.103.0】页面流式布局问题

范方舟
金牌服务用户   /  发表于：2024-11-4 18:04  /   查看：165  /  回复：3
10金币
现在开发一个页面，它是由左中右3部分构成的，但是左边的部分因为有搜索区域。因此宽度必须设置的固定从而满足能显示完整，但这样的话在1366*768的最低分辨率下会导致时间范围搜索显示不全，有没可能在布局时3部分等比例缩放？或者说在分辨率低到一定程度时让时间范围和重置搜索按钮换行显示。













附件: 您需要 登录 才可以下载或查看，没有帐号？立即注册

最佳答案

Erik.Xue

查看完整内容

您好，因为目前活字格还不能直接给一个页面设置多种布局方式，或者针对某个子页面设置不同的布局方式。 所以有个稍微绕的办法，就是把搜索栏这一块，使用【嵌入的HTML】插件： HTML自定义集成 - 葡萄城市场 这个插件可以嵌入自定义的HTML，然后自己使用flex布局写一个html页面，例如： CSS： 这样，子元素会根据父元素的宽高自动跳转换行。

3 个回复

正序浏览
Erik.Xue讲师达人认证 悬赏达人认证 活字格认证 Wyn认证
超级版主   /  发表于：2024-11-5 10:54:59
4#
范方舟 发表于 2024-11-5 10:21
平台的字体大小会随着分辨率的变化而自动缩放么？

目前也不太行，你说的这种应该是字体设置单位要为相对单位，比如em、rem、vw、vh。

活字格暂时没有这样的设置。
回复 使用道具 举报
范方舟
金牌服务用户   /  发表于：2024-11-5 10:21:44
3#
Erik.Xue 发表于 2024-11-5 08:55
您好，因为目前活字格还不能直接给一个页面设置多种布局方式，或者针对某个子页面设置不同的布局方式。

...

平台的字体大小会随着分辨率的变化而自动缩放么？
回复 使用道具 举报
最佳答案
最佳答案
Erik.Xue讲师达人认证 悬赏达人认证 活字格认证 Wyn认证
超级版主   /  发表于：2024-11-4 18:04:18
来自 2#
您好，因为目前活字格还不能直接给一个页面设置多种布局方式，或者针对某个子页面设置不同的布局方式。

所以有个稍微绕的办法，就是把搜索栏这一块，使用【嵌入的HTML】插件：

HTML自定义集成 - 葡萄城市场




这个插件可以嵌入自定义的HTML，然后自己使用flex布局写一个html页面，例如：
  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Flexbox Wrap Example</title>
  8.     <link rel="stylesheet" href="styles.css">
  9. </head>

  11. <body>
  12.     <div class="container">
  13.         <div class="item">Item 1</div>
  14.         <div class="item">Item 2</div>
  15.         <div class="item">Item 3</div>
  16.         <div class="item">Item 4</div>
  17.         <div class="item">Item 5</div>
  18.         <div class="item">Item 6</div>
  19.         <div class="item">Item 7</div>
  20.         <div class="item">Item 8</div>
  21.     </div>
  22. </body>

  24. </html>
复制代码
CSS：
  1. /* styles.css */
  2. body {
  3.     font-family: Arial, sans-serif;
  4. }

  6. .container {
  7.     display: flex;
  8.     flex-wrap: wrap;
  9.     /* 允许子元素换行 */
  10.     gap: 10px;
  11.     /* 子元素之间的间距 */
  12.     padding: 10px;
  13.     border: 1px solid #ccc;
  14.     width: 80%;
  15.     /* 父元素的宽度，可以根据需要调整 */
  16.     margin: 0 auto;
  17.     /* 居中对齐 */
  18. }

  20. .item {
  21.     background-color: #f0f0f0;
  22.     padding: 10px;
  23.     border: 1px solid #ddd;
  24.     flex: 0 0 auto;
  25.     /* 子元素的宽度固定，不伸缩 */
  26.     min-width: 100px;
  27.     /* 子元素的最小宽度，可以根据需要调整 */
  28. }
复制代码
这样，子元素会根据父元素的宽高自动跳转换行。




本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部