Question

当我在我的内容区域中放置块时，块对齐得很好但在编辑模式内部＆＃34; edit-boarder＆＃34;搞砸了。

有没有人知道如何解决这个问题？

查看图片了解更多详情

http://postimg.org/image/7wyue4nvv/

contentarea，block和css的代码：

http://pastebin.com/BsZQQ6b1

最好的问候西蒙

Answer 1

这通常是因为使用float而不使用clear。我通过编写类似的东西解决了类似的问题：

@if (PageEditing.PageIsInEditMode)
{
   <div class="clearfix"></div>
}

在视图中

。

如果错误在ContentArea中，您可以使用自定义ContentAreaRenderer来更改标记。请参阅下面的示例：

https://github.com/valdisiljuconoks/EPiBootstrapArea/blob/master/BootstrapAwareContentAreaRenderer.cs

https://github.com/valdisiljuconoks/EPiBootstrapArea/blob/master/Initialization/SwapRendererInitModule.cs

我在RenderContentAreaItems方法底部的ContentAreaRenderer中有这段代码：

if (PageEditing.PageIsInEditMode)
{
   var clearDivTag = new TagBuilder("div");
   clearDivTag.MergeAttribute("style", "clear: both;");
   htmlHelper.ViewContext.Writer.Write(clearDivTag.ToString());
}

Answer 2

我的解决方案

主要问题是要充分了解episerver如何呈现内容区域和与css保持一致的块。重要的是要检查epi呈现给浏览器的html，这将是内容区域本身的一个div，一个额外的生成（需要，epi说他们自己，他们选择渲染，你不能做任何事情it）div为editmode包装器，然后是你的块。

在编辑模式下，网站内容实际上是iframed in，并且因此将在每个单独块的epi-edit包装后加载。如果您的块看起来像我的，浮动，epi-wrapper将与任何浮动元素一样，并且不了解内容的高度。长话短说;使用样式“overflow：hidden;”将类添加到内容区域标记中修复浮动，然后删除你的块包装div（这是不需要的）并使用epi渲染div为此！使用可以放在内容区域渲染标记上的匿名对象执行此操作，如下所示：new {CssClass =“classnamewithoverflow”，ChildrenCssClass =“blocknamewithfloat”}）。

这显然只适用于相同宽度的块，但是使不同的块宽度工作是另一个故事:-)

Episerver内容区块横向

2 个答案: