问题 #3085✓ 已解决提出于 2020年10月21日作者 theSC0RP6 个反应

多列布局中元素定位的问题

快速解答作者 Ju99ernaut6

你可以把这个添加到'grapesjs.init'里的'pluginOpts'里: “''js const editor = Grapesjs.init({ // ... pluginsOpts: { “GJS-Blocks-Basic”: { stylePrefix: '', // no gjs- 前缀 flexGrid:1 // 用flexbox代替表格 } }, // ... }); ``` 这可能也能解决你之前的对齐问题,对响应式设计更有利

阅读下方完整回答 ↓

问题

如何控制列中单元格中元素的位置?左侧是地图元素,右侧是文本和图像。如下面的截图所示,右侧的元素位于地图之后。

![截图(175)](https://user-images.githubusercontent.com/30771519/96684561-6926b300-1399-11eb-9937-ec8af70277f0.png)

类似的问题也存在于[这个](https://codepen.io/artf/pen/MQpZPj)codepen(Grapesjs Custom UI由@artf)中。 ![截图(177)](https://user-images.githubusercontent.com/30771519/96686066-a9873080-139b-11eb-87d8-6f5258a2995f.png)

回答(3)

👍 最有帮助Ju99ernaut2020年10月23日

你可以把这个添加到'grapesjs.init'里的'pluginOpts'里:

“''js const editor = Grapesjs.init({ // ... pluginsOpts: { “GJS-Blocks-Basic”: { stylePrefix: '', // no gjs- 前缀 flexGrid:1 // 用flexbox代替表格 } }, // ... });


这可能也能解决你之前的对齐问题,对响应式设计更有利
MartinPutz2020年10月21日

@theSC0RP 这其实并不是GrapesJS本身的问题。GrapesJS 中的单元格有 “''CSS display:table-cell; 参见 https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align 所以你可以选择自动应用到自定义组件上,或者为这个设置创建一个自定义样式属性,方便更改。表格布局中可能还有其他对齐物品的方法。或者,你也可以创建自定义布局组件,按你的需求操作。

theSC0RP2020年10月22日

@MartinPutz 谢谢你的回答。我该如何在单元格上创建并应用自定义样式属性? 我用的是 [grapesjs-blocks-basic](https://github.com/artf/grapesjs-blocks-basic) 插件,所以这个单元格的类名是 'gjs-cell'。我尝试在我的styles文件中添加该类的推荐属性,但问题依旧存在。

相关问答

通过相似的问题讨论继续研究。

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

浏览插件分类

直接跳转到市场上的插件分类页面。