Question

我一直在将带有撇号的站点组合在一起，但是我已经提出了其中一种布局的问题，即它的运行效果不佳。

内容是p和img标签（左右浮动）的简单组合

用于向左浮动的图像的工具栏是可以的，但是用于向右浮动的图像的工具栏位于文档的错误一侧。

有没有解决此问题的好方法，而无需以其他方式构建布局？

或者，我可以使用RTF编辑器，但是RTF模块中的图像项仅允许使用URL中的图像，并且不包括将图像直接上传到系统中的方式（可以看到）。

感谢您的帮助！

maven install

}

  &#story-detail {

.wrapper-relative {
    section {
      overflow: visible;
      max-width: none!important;
       text-align: left;
       q {display: block; font-size: 1.3em; margin: 1em auto;}
       q, p, h5 {width:60%; margin:1em auto; z-index:5}
       div {overflow: visible;}
       img {
        position: relative;
        &.left {float:left; margin-left: 5%; padding-right: 20px; padding-bottom: 30px; max-width: 400px }
        &.right {float:right; margin-right: 5%;  padding-left: 20px; padding-bottom: 30px;  max-width: 400px}
        &.full { margin:0; width: 100%;  }
       }
}

Answer 1

您想浮动整个窗口小部件，而不只是浮动视觉内容（img）。为您的小部件提供一个自定义类，该类利用某种架构为自己提供不同的小部件修饰符。

在小部件模式中添加

{
  name: 'float',
  label: 'Float',
  type: 'select',
  choices: [
    { label: 'None', value: 'none' },
    { label: 'Left', value: 'left' },
    { label: 'Right', value: 'right' }
  ]
}

然后在lib/modules/simple-image-widgets/index.js

module.exports = {
  construct: function (self, options) {
    self.getWidgetWrapperClasses = function (widget) {
      return ['simple-image--' + widget.float];
    };
  }
};

现在您的整个包装器将具有一个知道要浮动的类，控件应随容器一起提供。

带浮点的撇号-cms工具栏

1 个答案: